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% 之间，第一张图像将开始从不透明过渡到完全透明。

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

第二张图像的关键帧执行相同的操作，只是其过渡直到达到 45 秒动画的 33% 时才开始。 （为了视觉吸引力，我选择将它们稍微重叠）。再次，我使用 33% 和 35% 之间的差异来保持较短的过渡时间，而不是 0% 和 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;}
}