html - 为什么 css3 幻灯片放映不起作用

Question

我正在尝试使用 css3 创建幻灯片。我遵循了一些教程:

• http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/
• http://css3.bradshawenterprises.com/cfimg/
• http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/

我得到了以下代码:

<div id="right-leftSide"> 
    <div id="leftPic">
        <img id="chefPic" src="images/chef.jpg">
        <img id ="recipeImage" src="images/people.jpg">
        <img src="images/recipe1.jpg" id="recipeImage2">
        <img id ="recipeImage" src="images/people.jpg">
    </div>
</div>

#leftPic{
    background-color: #00FFFF;
    width:100%;
    height: 300px;
    position: relative;
    margin: 0 auto;
}
#leftPic img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;

}

#leftPic img:nth-of-type(1){
    animation: fadeInOut 24s 18s infinite;
}
#leftPic img:nth-of-type(2){
    animation: fadeInOut 24s 12s infinite;
}
#leftPic img:nth-of-type(3){
    animation: fadeInOut 24s 6s infinite;
}
#leftPic img:nth-of-type(4){
    animation: fadeInOut 24s 0s infinite;
}



@keyframes fadeInOut{
    0% {
opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    92%{
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

但是，当我创建关键帧时，时间是如何确定的？这些示例使用了百分比，但我不明白那是什么意思。谁能解释一下？

Answer 1

在这里，我创建了一个 fiddle 来演示使用一些库存图像的动画。我还在 fiddle 中加入了 webkit 兼容性，因此它适用于 chrome 和其他 webkit 浏览器。

http://jsfiddle.net/xDaevax/Kfw3L/

例子:

#leftPic img:nth-of-type(1){
    animation: fadeInOut 24s 18s infinite;
    -webkit-animation: fadeInOut 24s 18s infinite;
}
#leftPic img:nth-of-type(2){
    animation: fadeInOut 24s 12s infinite;
    -webkit-animation: fadeInOut 24s 12s infinite;
}
#leftPic img:nth-of-type(3){
    animation: fadeInOut 24s 6s infinite;
    -webkit-animation: fadeInOut 24s 6s infinite;
}
#leftPic img:nth-of-type(4){
    animation: fadeInOut 24s 0s infinite;
    -webkit-animation: fadeInOut 24s 0s infinite;
}

请参阅此链接，它更清楚地解释了语法。 http://css-tricks.com/snippets/css/keyframe-animation-syntax/

基本上，根据您的代码，动画持续时间为 24 秒，延迟分别为 18、12、6 和 0 秒。

因此在时间轴上，在 0%(或 0 秒)时图像将 100% 不透明。当它达到 25% 或 6 秒时，图像将变为 0% 可见(透明)。第一张图片延迟 18 秒，第二张图片延迟 12 秒，依此类推...当它达到 24 秒(或 100%)时，图片将再次变为 100% 不透明。

所以对于你的动画，

• 第一张图片(列表中的第 4 张图片):无延迟，将持续 24 秒(完成时间为加载后 24 秒)。
• 第二张图片(列表中的第 3 张):延迟 6 秒，将持续 24 秒(完成时间为加载后 30 秒)。
• 第三个图像(列表中的第 2 个):延迟 12 秒，将持续 24 秒(加载完成时间为 36 秒)。
• 第四张图片(列表中的第 1 张):延迟 18 秒，将持续 24 秒(完成时间为加载后 42 秒)。