Question

I m trying to create a graceful transition between the images within my photo gallery without using ":hover" or an once of Javascript. (I m still open minded to HTML5)

这种幻觉,即幻灯,应从页数上开始,不需要用户的互动。然而,我的特别安全局没有适当时间。理想的情况是,每6秒,当下一个形象开始消失时,目前的形象就开始消失。估计应在最后的形象之后fin。

我在图像之间 delay误,企图夸大图像,但图像相互重叠太大。我似乎误解了一些事情。我的想法如下:

#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;
    }
}

我确实是新奇,因此将非常赞赏任何形式的援助。

Answer 1

成功!

I discovered if I apply an animation to each of my images within the slideshow, rather than being delayed, I could achieve the effect I desired. Basically the animations would run sequentially in an infinite loop, and rather than use a single keyframe, each has their own.

I wanted the slideshow to progress at 15s intervals. So to accomplish this I set the duration of the entire animation to 45s. The keyframes gradually adjust the opacity of the images based on the current time or frame within the animation. This is indicated by the "%." For example, from 2% to 32% of 45s, the keyframe for the first image will be 100% opaque. Between 32% and 34%, the first image will begin the transition from being opaque to completely transparent.

差异(45人中有34%)——45人中有32%)相当于完成过渡的时间。增加这种差别,使过渡时间更长。

第二张图像的关键参数是,其过渡性只开始,直到达到45个图像的33%。 (我选择在视力呼吁中稍加重复。) 同样,我利用33%到35%之间的差额来保持过渡期的短暂性,而不是0%和35%的过渡期。

第三个关键框架采用了相同的图像计划。

在你执行时,不要忘记改变/增加适当的供应商预设条件,供你们的浏览器和浏览器。

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

我希望,这对任何其他可能试图这样做的人都是有益的。如果你喜欢你的话,请在你用arrow子进行表决时,我感到可以自由。

感谢。

=

#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;}
}

友情链接