Question

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

Answer 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"> Image 1 <li> <img src="http://placehold.it/200x100"> Image 2 <li> <img src="http://placehold.it/200x100"> Image 3 </ul> </body> </html>

Answer 2

您必须使用 javascript

添加动画触发器

Javascript demo

window.onload = function (){ }

或 jQuery demo

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

CSS3动画和过渡在文档加载之前立即启动。

关键帧动画不同步

2 个答案: