Css 关键帧动画不同步

在本地文件系统上正常工作，而不是在服务器上。由于某种原因，它开始不同步。谢谢你的帮助。仅WebKit的供应商前缀。在Chrome 26中测试。演示：

HTML:

演示：

---

请不要回答使用JavaScript的问题。谢谢

您必须使用javascript添加动画触发器

或

---

由于CSS3动画和转换在文档加载之前立即启动。

您的动画可能并不总是同时启动

我发现消极的延迟能很好地保持事情的同步。使用此技术，每个动画将在同一时间加载，但某些部分在过去开始。查看jsbin示例：

编辑以添加内联示例：

ul{
背景：#000；
高度：100px；
填充：0；
位置：相对位置；
宽度：200px；
}
李{
身高：继承；
保证金：0；
不透明度：0；
填充：0；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
宽度：继承；
-webkit动画：幻灯片放映9s线性无限；
动画：幻灯片放映9s线性无限；
}
李：第n个孩子（1）{
-webkit动画延迟：-9秒；
动画延迟：-9秒；
}
李：第n个孩子（2）{
-webkit动画延迟：-6s；
动画延迟：-6s；
}
李：第n个孩子（3）{
-webkit动画延迟：-3s；
动画延迟：-3s；
}
@-webkit关键帧幻灯片放映{
0% {
不透明度：0；
}
3% {
不透明度：1；
}
30% {
不透明度：1；
}
33% {
不透明度：0；
}
100% {
不透明度：0；
}
}
@关键帧幻灯片放映{
0% {
不透明度：0；
}
3% {
不透明度：1；
}
30% {
不透明度：1；
}
33% {
不透明度：0；
}
100% {
不透明度：0；
}
}
img{
保证金：0；
填充：0；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}
跨度{
背景：rgba（40,40,40,0.8）；
颜色：#fff；
填充物：5px；
位置：绝对位置；
右：0；
底部：0；
左：0；
}

JS-Bin


图1

图2

图3

你的意思是它在动画开始前“闪烁”第三张幻灯片吗？在我的Chrome上看起来不错。也许一开始有闪光，我不能说。@Chris不，这里不同步。e、 例如，幻灯片1显示3秒，而幻灯片2显示不到1秒；然后在幻灯片3之后，在幻灯片1再次出现之前会有一个延迟。这里的想法是不使用JS。从我所知道的，这是同步CSS动画的唯一方法。至少JS非常小。唯一的其他替代方案将涉及更多的JS（添加/删除类并使用转换，而不是CSS关键帧动画）。这不值得任何反对票。谢谢你，艾哈迈德。嗨，你的演示上的链接断了。请你在你的示例（完整的代码行）中进一步解释，thx:@SébastienGarcia Roméo你找到了你需要的解决方案吗？非常有用，正是我需要解决类似问题的方法（图像滑入/滑出）。负延迟值&z指数是必要的。谢谢你，helloworld！

<ul class="slides">
  <li><img src="http://placehold.it/200x100" /><span class="caption">Image 1</span></li>
    <li><img src="http://placehold.it/200x100" /><span class="caption">Image 2</span></li>
    <li><img src="http://placehold.it/200x100" /><span class="caption">Image 3</span></li>
</ul>

ul.slides{
  position: relative;
    background: #000;
    height: 100px;
    width: 200px;
    padding: 0;
}
ul.slides li{
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    height: inherit;
    width: inherit;
    padding: 0;
    margin: 0;
    -webkit-animation: slideshow 9s linear infinite;
}
ul.slides.clickpause:active li{
    -webkit-animation-play-state:paused;
}
ul.slides li:nth-child(1){ -webkit-animation-delay: 0s; }
ul.slides li:nth-child(2){  -webkit-animation-delay: 3s; }
ul.slides li:nth-child(3){  -webkit-animation-delay: 6s; }
@-webkit-keyframes slideshow{
0%{
    opacity: 0;
    z-index: 2;
}
3%{
    opacity: 1;
}
30%{
    opacity: 1;
 }
33%{
    opacity: 0;
 }
34%{
    z-index: 1;
 }
100%{
    opacity: 0;
 }
}
ul.slides li img{
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    padding: 0;
    margin: 0
}
ul.slides li span{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(40, 40, 40, 0.8);
    color: #FFF;
    padding: 5px
}

window.onload = function (){ }

$(window).load(function(){})