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