Question

解

对于12s动画：

.rightleftloop {-moz-animation-delay:0s;}
.rightleftloop2 {-moz-animation-delay:3s;}
.rightleftloop3 {-moz-animation-delay:6s;}
.rightleftloop4 {-moz-animation-delay:9s;}

@-moz-keyframes rightleftloopmz {
0% {-moz-transform: translateX(-500px);}
10% {-moz-transform: translateX(300px);}
25% {-moz-transform: translateX(300px);}
40% {-moz-transform: translateX(-500px);}
100% {-moz-transform: translateX(-500px);}
}

问题

我有一个循环动画的四个图像，一个接一个地滑动但是一旦所有四个动画播放循环跳过第一个动画并循环第二个，第三个和第四个动画。第一个动画仅在刷新页面时播放。如果我对动画延迟进行了更改，则图像会重叠。

.rightleftloop, .rightleftloop2, .rightleftloop3, .rightleftloop4 {
position: absolute;
-moz-animation:rightleftloopmz;
-moz-animation-duration:12.0s;
-moz-animation-iteration-count:infinite;
-moz-animation-fill-mode: both;
}

.rightleftloop {-moz-animation-delay:0ms;}
.rightleftloop2 {-moz-animation-delay:4000ms;}
.rightleftloop3 {-moz-animation-delay:8000ms;}
.rightleftloop4 {-moz-animation-delay:12000ms;}

@-moz-keyframes rightleftloopmz {
0% {-moz-transform: translateX(-500px);}
15% {-moz-transform: translateX(300px);}
35% {-moz-transform: translateX(300px);}
50% {-moz-transform: translateX(-500px);}
100% {-moz-transform: translateX(-500px);}
}

<div class="rightleftloop"><img src="http://images.sodahead.com/polls/0/0/0/7/5/4/9/9/7/polls_batman_icon735_1455_711105_poll.jpeg"/></div>
<div class="rightleftloop2"><img src="http://fc04.deviantart.net/fs71/f/2011/202/e/0/superman_icon_4_by_jeremymallin-d417qjg.png"/></div>
<div class="rightleftloop3"><img src="https://cdn1.iconfinder.com/data/icons/UltraBuuf/256/Happy_Hulk.png"/></div>
<div class="rightleftloop4"><img src="http://megaicons.net/static/img/icons_sizes/189/462/256/comics-thor-icon.png"/></div>

该笔具有适用于所有浏览器的动画代码：

http://codepen.io/MBM/pen/seIiE

css动画循环计时问题

0 个答案: