我有一些使用 CSS3 在屏幕上不断移动 div 的代码,我想做的是在第一个动画周期中在动画的不同点(即 20%)启动我用 CSS 编写的动画, 从那时起每个周期都从 0% 开始。感谢您的帮助,下面是 JSFiddle。
HTML:
<div class="x1">
</div>
CSS:
.x1 {
right: 30%;
top: 90px;
-webkit-animation: animato 15s linear infinite;
-moz-animation: animato 15s linear infinite;
-o-animation: animato 15s linear infinite;
animation: animato 15s linear infinite;
}
@keyframes animato {
0% { right: -25%; }
20% { right: 0%; }
40% { right: 25%; }
60% { right: 50%; }
80% { right: 75%; }
100% { right: 100%; }
}
比如说,我将如何在 20% 标记处开始 animato
?
最佳答案
.x1 {
right: 30%;
top: 90px;
-webkit-animation: animato 15s linear infinite;
-moz-animation: animato 15s linear infinite;
-o-animation: animato 15s linear infinite;
animation: animato 15s linear infinite;
-webkit-animation-delay: -3s; /* offsets the animation starting point for 3/15 = 20% */
-moz-animation-delay: -3s;
-o-animation-delay: -3s;
animation-delay: -3s;
}
关于css - 在不同点开始 CSS3 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17530552/