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

问题描述 投票：0回答：1

我有一个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 css3 animation css-transitions
1个回答
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.