CSS3相册过渡效果

Question

我正在尝试在我的照片库中的图像之间创建一个优雅的过渡，而不使用 ":hover" 或一次 Javascript。 （我仍然对 HTML5 持开放态度）

动画，这个幻灯片，应该在页面加载时开始，不需要用户交互。但是我的 CSS 没有正确计时。理想情况下，每 6 秒，当前图像开始淡出，就像下一张图像开始淡入一样。动画应该在最后一张图像之后无限循环。

我正在使用图像之间的延迟来尝试错开动画，但图像彼此重叠太多。我似乎误解了很多事情。我的CSS如下：

#imgContainer {
height: 205px;
position: relative;
width: 300px;
}

#imgContainer img {
-moz-animation-duration: 12s;
-moz-animation-iteration-count: infinite;
-moz-animation-name: FadeInOut;
-moz-animation-timing-function: ease-in-out;
left: 0;
position: absolute;
}
#imgContainer img:nth-of-type(1) {
    -moz-animation-delay: 0s;
}
#imgContainer img:nth-of-type(2) {
    -moz-animation-delay: 6s;
}
#imgContainer img:nth-of-type(3) {
    -moz-animation-delay: 12s;
}

@-moz-keyframes FadeInOut {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

我真的是 css3 的新手，所以任何形式的帮助都将不胜感激。

Answer 1

成功！

我发现如果我将动画应用到幻灯片中的每个图像，而不是被延迟，我可以达到我想要的效果。基本上，动画将在无限循环中按顺序运行，而不是使用单个关键帧，每个都有自己的关键帧。

我希望幻灯片每隔 15 秒播放一次。所以为了做到这一点，我将整个动画的持续时间设置为 45 秒。关键帧根据动画中的当前时间或帧逐渐调整图像的不透明度。这由“%”表示。例如，从 45 秒的 2% 到 32%，第一张图像的关键帧将 100% 不透明。在 32% 和 34% 之间，第一个图像将开始从不透明过渡到完全透明。

(34% of 45s) - (32% of 45s) 之间的差值等于完成过渡的时间长度。增加此差异以获得更长的过渡。

第二张图片的关键帧也是如此，只是它的过渡直到 45 秒动画的 33% 才开始。 （为了视觉吸引力，我选择将它们稍微重叠）。同样，我使用 33% 和 35% 之间的差异来缩短过渡时间，而不是 0% 和 35% 会产生更长的过渡。

第三个关键帧的图像采用相同的方案。

在您实施此操作时，不要忘记为您的浏览器和您的网络受众的浏览器更改/添加适当的供应商前缀。

/*Chrome/Safari: -webkit- \ FireFox +4: -moz- \ Opera: -o- \ IE9?: -ms- */

我希望这对可能尝试做同样事情的其他人有所帮助。如果您喜欢您所阅读的内容，请在使用向上箭头投票时随时告诉我。

谢谢。

=)

#imgContainer img{
    position:absolute;
    left:0;
}

#image0 {
    -moz-animation: 45s linear 0s normal none infinite myKeyFrameName0;
}
#image1 {
    -moz-animation: 45s linear 0s normal none infinite myKeyFrameName1;
}
#image2 {
    -moz-animation: 45s linear 0s normal none infinite myKeyFrameName2;
}

@-moz-keyframes myKeyFrameName0 {
0%   {opacity: 0;}
2%   {opacity: 1;}
32%  {opacity: 1;}
34%  {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes myKeyFrameNamee1 {
0%   {opacity: 0;}
33%  {opacity: 0;}
35%  {opacity: 1;}
65%  {opacity: 1;}
67%  {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes myKeyFrameName2 {
0%   {opacity: 0;}
66%  {opacity: 0;}
68%  {opacity: 1;}
98%  {opacity: 1;}
100% {opacity: 0;}
}