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秒。关键帧基于动画中的当前时间或帧逐渐调整图像的不透明度。这由＆＃34;％表示。＆＃34;例如，从45％的2％到32％，第一个图像的关键帧将是100％不透明的。在32％到34％之间，第一张图像将从不透明过渡到完全透明。

（45％中的34％） - （45％中的32％）之间的差异等于完成过渡的时间长度。增加此差异以实现更长时间的过渡。

第二张图片的关键帧只有它的＆＃39;过渡直到它达到45s动画的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;}
}

CSS3照片库过渡效果

1 个答案: