计算CSS3幻灯片中10个或更多图像的百分比



我正在尝试在定时循环幻灯片中制作一系列10幅图像的动画。幻灯片已经开始播放了。。。有点。作为CSS3的新手,即使在谷歌上搜索了一整天,我也没有找到这个问题的答案。

我的第一个问题在于每个图像的时间安排。我已经为10个图像中的每一个都有了一个div,并在CSS中为每个图像编写了单独的规则(如下面的"etc.…"所示)。

我不确定应该如何根据您使用的图像数量来计算@keyframe动画的百分比。我提供了一个例子如下:

@-webkit-keyframes anim_slides {
0% { opacity:0; }
6% { opacity:1; }
24% { opacity:1; }
30% { opacity:0; }
100% { opacity:0;}
}
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
-webkit-animation-delay: 8.0s;
-moz-animation-delay: 8.0s;}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
-webkit-animation-delay: 16.0s;
-moz-animation-delay: 16.0s;}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
-webkit-animation-delay: 24.0s;
-moz-animation-delay: 24.0s;}
.slides ul  li:nth-child(5), .slides ul  li:nth-child(5) div {
-webkit-animation-delay: 32.0s;
-moz-animation-delay: 32.0s;}
etc....

我把幻灯片的信息作为参考,因为我最关心的是百分比。

我为CSS3动画找到的大多数教程只使用3-6个图像,并且百分比是专门为这个数量设置的。由于我使用了10张图片,百分比似乎不再相关。

其次,我不确定当你有超过(显然)标准的3-6个图像时,动画的持续时间会受到什么影响。

.slides ul li {
opacity:0;
position:absolute;
top:0;
/* css3 animation */
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 80.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_slides;
-moz-animation-duration: 80.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;}

正如你所看到的,动画持续时间设置为80.0s。老实说,我甚至不确定这是否正确。

有人能帮我吗?我真正需要的只是一个解释。

谢谢!

计算百分比的方式取决于转换的确切工作方式。

当您设置时

@-webkit-keyframes anim_slides {
    0% { opacity:0; }
    6% { opacity:1; }
    24% { opacity:1; }
    30% { opacity:0; }
    100% { opacity:0;}
}

你所说的是,从0到1的过渡需要周期的6%,不透明度为1的周期为18%(24-6),从1到0的过渡需要6%。

设置这种转换的一种方法是,元素的"in"转换与前一个元素的"out"转换重叠。

在这种情况下,对于10个图像,将有10个完全可见性阶段和10个过渡。因此,2的总和的时间将是10%(100%/10)。你现在可以将这10%作为你想要的完全可见性和过渡。如果这个比率是1/3,就像在您的例子中一样,那么它对于过渡是2.5%,对于静止图像是7.5%。

@-webkit-keyframes anim_slides {
    0% { opacity:0; }
    2.5% { opacity:1; }
    10% { opacity:1; }
    12.5% { opacity:0; }
}

这样就可以了。

相关内容

  • 没有找到相关文章

最新更新