1

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

我的第一个问题在于每张图片的时间安排。我已经为 10 个图像中的每一个创建了一个 div，并且在我的 CSS 中为每个图像编写了单独的规则（如下面的“等...”所示）。

我不确定我应该如何根据您使用的图像数量来计算@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;}

如您所见，animation-duration 设置为 80.0s。老实说，我什至不确定这是否正确。

谁能帮我吗？我真正需要的只是一个解释。

谢谢！

4

1 回答 1

2

您计算百分比的方式取决于希望转换工作的确切程度。

当你设置

@-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%。

设置这种转换的一种方法是元素的“入”转换与先前元素的“出”转换重叠。

在这种情况下，对于 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; }
}

那应该这样做。

于 2013-07-19T20:45:35.340 回答