如何在 css3 滑块中计算新的关键帧百分比答案

【问题标题】：How to calculate new keyframe percentages in a css3 slider如何在 css3 滑块中计算新的关键帧百分比
【发布时间】：2018-01-04 19:46:04
【问题描述】：

我有一个 CSS 滑块，它可以很好地处理 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;}
}

谁能帮帮我？我真的需要一个明确的解释才能理解:(

【问题讨论】：

标签： css animation css-transitions

【解决方案1】：

这是使用动画延迟和 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>

【讨论】：

嗨，计时效果很好..但是当我尝试它们时图像太小了。每张图片都有一个特定的尺寸设置，每张图片都必须像滑块一样在另一张图片的顶部，而不是像您发布的最后一张图片一样
这是另一个问题，如果您需要有关如何堆叠图像的帮助，请打开另一个问题。