CSS3照片库过渡效果

时间:2011-11-04 04:00:21

标签: css html5 css3 slideshow css-transitions

我正在尝试在照片库中的图像之间创建一个优雅的过渡,而不使用“: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的新手,所以任何形式的帮助都会非常感激。

1 个答案:

答案 0 :(得分:4)

成功!

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

我希望幻灯片以15秒的间隔进行。因此,为了实现这一点,我将整个动画的持续时间设置为45秒。关键帧基于动画中的当前时间或帧逐渐调整图像的不透明度。这由"%表示。"例如,从45%的2%到32%,第一个图像的关键帧将是100%不透明的。在32%到34%之间,第一张图像将从不透明过渡到完全透明。

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

第二张图片的关键帧只有它的'过渡直到它达到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;}
}