<分区>
<分区>
我试过“-webkit-animation-fill-mode: forwards;”但我似乎无法让它工作，它只是在第一帧暂停，有人可以帮我吗？
<div class="logo"></div>
.logo {
width: 328px;
height: 187px;
background-image: url("http://u.cubeupload.com/amitkilo/opti.png");
-webkit-animation: play 2.0s steps(60);
-moz-animation: play 2.0s steps(60);
-ms-animation: play 2.0s steps(60);
-o-animation: play 2.0s steps(60);
animation: play 2.0s steps(60);
}
@-webkit-keyframes play {
from { background-position: 0px 0px; }
to { background-position: 0px -11220px; }
}
@-moz-keyframes play {
from { background-position: 0px 0px; }
to { background-position: 0px -11220px; }
}
@-ms-keyframes play {
from { background-position: 0px 0px; }
to { background-position: 0px -11220px; }
}
@-o-keyframes play {
from { background-position: 0px 0px; }
to { background-position: 0px -11220px; }
}
@keyframes play {
from { background-position: 0px 0px; }
to { background-position: 0px -11220px; }
}
最佳答案
我认为您的数字略有偏差。如果您将步数减少一个并相应地减少最终 bg 位置……一切正常。
我认为this问题可能是相关的。
.logo {
width: 328px;
height: 187px;
background-image: url("http://u.cubeupload.com/amitkilo/opti.png");
background-repeat: no-repeat;
animation: play 2.0s steps(59);
-webkit-animation-fill-mode: forwards;
}
@keyframes play {
0% {
background-position: 0px 0px;
}
100% {
background-position: 0px -11033px;
}
}<div class="logo"></div>关于css - 如何在最后一帧暂停 CSS 动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30307750/