Question

我试图在定时循环播放幻灯片中为一系列10张图像制作动画。幻灯片已经在工作......有点儿。作为CSS3的新手，甚至在整天搜索Google之后，我还没有找到解决这个问题的答案。

我的第一个问题在于每张图像的时间。我已经为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....

我将.slides信息作为参考包含在内，因为我最关心的是百分比。

我发现的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.0秒。老实说，我甚至不确定这是否正确。

任何人都可以帮助我吗？我所需要的只是一个解释。

谢谢！

Answer 1

计算百分比的方式取决于过渡的准确程度。

设置

时

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

你所说的是从0到1的过渡需要6％的周期，18％（24-6）的过渡，其中opacity = 1，另一个过渡从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; }
}

应该这样做。

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

1 个答案: