我已经尝试了很多次迭代,但似乎并不想留在最后一个关键帧上.
我不知道我在这里做错了什么
<style> #container{ position: relative; width: 100%; height: 100%; background-color: black; } #centerhex{ background-image:url(http://i.imgur.com/4sZDtfK.png); background-repeat:no-repeat; background-position:center; height:224px; width:210px; position:absolute; margin-left: -105px; margin-top: -112px; top:50%; left:50%; } .fadein{ animation:fadein 1.5s; animation-timing-function:linear; animation-delay:1s; animation-fill-mode:forwards,none animation-iteration-count: 1 -webkit-animation-iteration-count: 1 -webkit-animation:fadein 1.5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:1s; -webkit-animation-fill-mode: forwards,none } .transtart{ opacity:0 } @-webkit-keyframes fadein { 0%{opacity:0;} 50%{opacity:1;} 60%{opacity:1;} 100%{opacity:0.2;} } @keyframes fadein { 0%{opacity:0;} 50%{opacity:1;} 60%{opacity:1;} 100%{opacity:0.2;} } </style> </head> <body> <div id="container"> <div class="fadein transtart"> <div id="centerhex"></div> </div> </div>
动画填充应该照顾它,但由于某种原因,它不是.任何帮助将不胜感激.
解决方法
删除动画填充模式的双重声明只是转发:
.fadein{ animation:fadein 1.5s; animation-timing-function:linear; animation-delay:1s; animation-fill-mode:forwards; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; -webkit-animation:fadein 1.5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:1s; -webkit-animation-fill-mode: forwards; }