我有一个 css slider ，可以很好地处理 4 个图像，总动画持续时间为 30 秒。但是现在，我想将第一张图像设置为 32 秒，接下来的 3 张，每张图像设置为 10 秒，总共 62 秒。我尝试了关键帧百分比的不同组合，但我无法处理它们。
有人知道计算它们和计算新动画持续时间的简单方法吗？
代码如下:
.slide > figure:nth-child(1)
{
z-index: 4;
opacity: 1;
animation: slide1 30s;
-webkit-animation: slide1 30s;
-moz-animation: slide1 30s;
-o-animation: slide1 30s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
}
@keyframes slide1
{
0%{opacity:1;z-index:5;}
24%{opacity:1;z-index:5;}
26%{opacity:0;z-index:5;}
27%{opacity:0;z-index:1;}
94%{opacity:0;z-index:1;}
95%{opacity:1;z-index:1;}
96%{opacity:1;z-index:5;}
100%{opacity:1;z-index:5;}
}
.slide > figure:nth-child(2)
{
z-index: 3;
opacity: 0;
animation: slide2 30s;
-webkit-animation: slide2 30s;
-moz-animation: slide2 30s;
-o-animation: slide2 30s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
}
@keyframes slide2
{
0%{opacity:0;z-index:4;}
23%{opacity:0;z-index:4;}
24%{opacity:1;z-index:4;}
25%{opacity:1;z-index:4;}
26%{opacity:1;z-index:3;}
49%{opacity:1;z-index:3;}
51%{opacity:0;z-index:3;}
52%{opacity:0;z-index:4;}
100%{opacity:0;z-index:4;}
}
.slide > figure:nth-child(3)
{
z-index: 2;
opacity: 0;
animation: slide3 30s;
-webkit-animation: slide3 30s;
-moz-animation: slide3 30s;
-o-animation: slide3 30s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
}
@keyframes slide3
{
0%{opacity:0;z-index:3;}
48%{opacity:0;z-index:3;}
49%{opacity:1;z-index:3;}
50%{opacity:1;z-index:3;}
51%{opacity:1;z-index:5;}
74%{opacity:1;z-index:5;}
76%{opacity:0;z-index:5;}
77%{opacity:0;z-index:3;}
100%{opacity:0;z-index:3;}
}
.slide > figure:nth-child(4)
{
z-index: 1;
opacity: 0;
animation: slide4 30s;
-webkit-animation: slide4 30s;
-moz-animation: slide4 30s;
-o-animation: slide4 30s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
}
@keyframes slide4
{
0%{opacity:0;z-index:2;}
73%{opacity:0;z-index:2;}
74%{opacity:1;z-index:2;}
75%{opacity:1;z-index:2;}
76%{opacity:1;z-index:5;}
95%{opacity:1;z-index:5;}
97%{opacity:0;z-index:5;}
98%{opacity:0;z-index:2;}
100%{opacity:0;z-index:2;}
}谁能帮帮我？我真的需要一个明确的解释来理解:(
最佳答案
这是使用动画延迟和 2 个动画的更简单方法:
62s = 100%
32s = 32/62 = 51.6%
10s = 10/62 = 16%
.slide > figure:nth-child(1) {
animation: slide1 62s infinite;
}
.slide > figure:nth-child(2) {
opacity: 0; z-index:1;
animation: slide2 62s infinite;
}
.slide > figure:nth-child(3) {
opacity: 0; z-index:1;
animation: slide2 62s 10s infinite;
}
.slide > figure:nth-child(4) {
opacity: 0; z-index:1;
animation: slide2 62s 20s infinite;
}
@keyframes slide1 {
52.6%, 100% {opacity:0; z-index:1;}
0%, 51.6% {opacity:1; z-index:5;}
}
@keyframes slide2 {
0%, 52.6%, 70.6%, 100% {opacity:0; z-index:1;}
53.6%, 69.6% {opacity:1; z-index:5;}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="slide">
<figure>
<img src="https://placeholdit.imgix.net/~text?txt=Image-1">
</figure>
<figure>
<img src="https://placeholdit.imgix.net/~text?txt=Image-2">
</figure>
<figure>
<img src="https://placeholdit.imgix.net/~text?txt=Image-3">
</figure>
<figure>
<img src="https://placeholdit.imgix.net/~text?txt=Image-4">
</figure>
</div>
</body>
</html>关于css - 如何在 css3 slider 中计算新的关键帧百分比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48093367/