我已经尝试了很多次迭代,但似乎并不想留在最后一个关键帧上.
我不知道我在这里做错了什么
<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; }
原文地址:https://www.jb51.cc/css/217159.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。