关键帧动画不同步答案

【问题标题】：Keyframe Animations not in sync关键帧动画不同步
【发布时间】：2016-07-06 04:59:22
【问题描述】：

在我的本地文件系统上正常工作，而不是在服务器上。由于某种原因，它开始不同步。谢谢你的帮助。只有供应商前缀为 WebKit。在 Chrome 26 中测试。Demo：http://cssdesk.com/jjqKK

HTML：

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

CSS：

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
}

演示：http://cssdesk.com/jjqKK

请不要使用 JavaScript 回答。谢谢！

【问题讨论】：

你的意思是在动画开始之前“闪烁”第三张幻灯片吗？
在我的 Chrome 上看起来不错。也许一开始有闪光，我不能说。
@Chris 不，这里不同步。例如，幻灯片 1 显示 3 秒，而幻灯片 2 显示不到 1 秒；然后在幻灯片 3 之后出现延迟，然后幻灯片 1 再次出现。

标签： css css-animations

【解决方案1】：

您的动画可能并不总是同时开始。

我发现负延迟非常适合保持同步。使用这种技术，每个动画将同时加载，但有些部分在过去开始。查看 jsbin 示例：

http://jsbin.com/EreYIdE/2/edit

编辑以添加示例内联：

ul {
  background: #000;
  height: 100px;
  padding: 0;
  position: relative;
  width: 200px;
}

li {
  height: inherit;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  width: inherit;
  
  -webkit-animation: slideshow 9s linear infinite;
  animation: slideshow 9s linear infinite;
}

li:nth-child(1) { 
  -webkit-animation-delay: -9s; 
  animation-delay: -9s; 
}

li:nth-child(2) {	
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

li:nth-child(3) {	
  -webkit-animation-delay: -3s; 
  animation-delay: -3s; 
}

@-webkit-keyframes slideshow {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slideshow {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

img {
  margin: 0;
  padding: 0;
  position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

span {
  background: rgba(40, 40, 40, 0.8);
  color: #fff;
  padding: 5px;
  position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul>
  <li>
    <img src="http://placehold.it/200x100">
    <span>Image 1</span>
	
  <li>
    <img src="http://placehold.it/200x100">
    <span>Image 2</span>
	
  <li>
    <img src="http://placehold.it/200x100">
    <span>Image 3</span>
</ul>
</body>
</html>

【讨论】：

非常有帮助，正是我解决类似问题所需要的（图像滑入/滑出）。负延迟值 & z-index 是必不可少的。谢谢你好世界！

【解决方案2】：

您必须使用 javascript

添加动画触发器

Javascript demo

window.onload = function (){ }

或 jQuery demo

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

因为 CSS3 动画 和转场在文档加载之前立即开始。

【讨论】：

这里的想法是无 JS。
据我所知，这是同步 CSS 动画的唯一方法。至少 JS 非常小。唯一的其他选择将涉及更多的 JS（添加/删除类和使用过渡，而不是 CSS 关键帧动画）。这不值得任何反对。谢谢你，艾哈迈德。
嗨，你的演示链接坏了..请你在你的例子中进一步解释（完整的代码行），谢谢 :)
@SébastienGarcia-Roméo 你找到了你需要的解决方案吗？？