css动画循环计时问题

解决方案

对于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>

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

---

事实上第一个动画似乎仍在继续，至少这是我在Chrome上看到的——但第一个图像被卡在同一位置上的最后一个图像后面。奇怪的是，当我在Chrome上检查时，我只看到过一次蝙蝠侠徽标。我看到雷神的左右两侧都有一点蝙蝠侠徽标的黑黄色边框头盔…在Firefox中也是一样。我认为这很有意义——你的动画持续时间是12秒，第四个项目的动画延迟也是12秒——也就是说，当第四个项目的动画开始时，第一个项目的动画在完全相同的时间完成，因此它在非常相同的时间再次开始。您基本上将12秒的动画持续时间分为三个间隔，每个间隔4秒，而您应该将其分为四个间隔，因为您有四个元素，并且希望“平均分配”延迟，每个延迟为3秒。将延迟设置为0、3、6和9秒–您将看到它变得一致。当然，元素将在最右边的位置重叠–因此您必须计算出关键帧内百分比值的另一个分布。