9

在我的本地文件系统上正常工作，而不是在服务器上。由于某种原因，它开始不同步。谢谢你的帮助。只有供应商前缀为 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 的答案。谢谢！

4

2 回答 2

12

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

我发现负延迟非常适合保持同步。使用这种技术，每个动画将同时加载，但有些部分是从过去开始的。查看 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>

于 2014-01-17T00:02:18.510 回答
2

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

Javascript 演示

window.onload = function (){ }

或 jQuery 演示

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

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

于 2013-04-08T07:37:41.393 回答