Question

我正在尝试使用css3创建幻灯片。我已经学过几个教程：

我已经得到了以下代码：

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

但是，当我创建keyframes时，如何确定时间？示例使用百分比，但我不明白意味着什么。谁能解释一下？

Answer 1

在这里，我创建了一个小提琴，用一些图像来演示动画。我还在小提琴中包含了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秒）。
第三张图像（列表中的第二张）：12秒延迟，持续24秒（加载完成时间为36秒）。
第四张图片（列表中的第一张）：18秒延迟，持续24秒（完成时间为42秒）。

Answer 2

这里你宣布了动画的时间，

#leftPic img:nth-of-type(1){
    animation: fadeInOut 24s 18s infinite;
}
../

在你的代码的这一部分中，你要说的是动画的这个百分比，我希望设置这个不透明度。

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

opacity的定义不透明度 - 缺乏透明度或半透明度的条件;不透明。

因此，如果您说明动画的时间为100 seconds，那么{ opacity: 1; }的{{1}}为10 seconds，那么您将{ opacity: 1;

为什么css3幻灯片不起作用

2 个答案: