Question

尝试在每次迭代中设置随机的动画时间。我设置了CSS自定义属性--animation-time，每次使用JS进行动画迭代时都会随机更改。

let square = document.getElementById('square');
let time;

square.addEventListener('animationiteration', duration);

function duration() {
  time = Math.random() + 1;
  square.style.setProperty('--animation-time', time + 's');
  console.log(time);
}

:root {
  --animation-time: 5s;
  --color-1: #ff0000;
  --color-2: #ffee00;
}

@keyframes fire {
  0% {
    background-color: var(--color-1);
  }
  100% {
    background-color: var(--color-2);
  }
}

#square {
  width: 100px;
  height: 100px;
  animation: fire var(--animation-time) ease alternate infinite;
}

<div id="square"></div>

动画的持续时间设置为time = Math.random() + 1;，因此迭代的时间不得少于1秒。但是，有时会很快发生。为什么？

这是一个CodePen：https://codepen.io/aitormendez/pen/YbvvKw

Answer 1

更改animation-duration时，您不仅会更改每次迭代的方式，而且会更改整个动画。例如，如果您将3s用作持续时间，那么第一次迭代将花费3s，如果在3s（迭代结束）您更改为5s，就好像您在创建另一个动画一样迭代将持续5秒钟，您会跳到该新动画的新状态，即3s中5s的状态。

这是一个更好地说明问题的示例。我将继续增加持续时间，并且您会注意到，一旦到达迭代结束，您将返回到先前的状态，因为您增加了持续时间，然后您将再次到达最后一个状态，并且您将返回，依此类推。 / p>

这就像某人正在运行到100%状态，并且您不断增加该状态一样。

let square = document.getElementById('square');
let time = 1;

square.addEventListener('animationiteration', duration);

function duration() {
  time*=2;
  square.style.setProperty('--animation-time', time + 's');
  console.log(time);
}

:root {
  --animation-time: 1s;
}

@keyframes fire {
  0% {
    background-color: red;
  }
  50% {
    background:yellow;
  }
  100% {
    background-color: black;
  }
}

#square {
  width: 100px;
  height: 100px;
  animation: fire var(--animation-time) ease infinite alternate;
}

<div id="square"></div>

在上面的示例中，我将持续时间乘以2，因此每次我跳回到50%状态开始时，一旦到达100%，我都会再次重复。 >

您的代码也会发生同样的情况，但是由于您要增加/减少持续时间，所以代码会更复杂。减少持续时间将使您跳至下一个迭代和替代状态。

换句话说，您将以随机闪烁的动画结束。

为了直观地说明正在发生的事情，是一个动画，我将在动画中设置您的动画的时间线

.box {
  height:50px;
  border:1px solid;
  background:
    /* This will illustrate the current state */
    linear-gradient(green,green) left/2px 100% no-repeat,
    /* This is our animation with a duration of 5s (50px) intially*/
    linear-gradient(to right,yellow,red,red,yellow) left/100px 100%;
   
  animation:
    move 10s linear infinite, /* This is the current state*/
    change 2s steps(3) infinite /* this is the change of the animation duration*/
  ; /**/
}

@keyframes move {
  to {
    background-position:right,left;
  }
}
@keyframes change {
  to {
    background-size:2px 100%,40px 100%;
  }
}

<div class="box">

</div>

您可以看到我们并没有改变当前状态（用绿线表示），但是我们正在改变整个动画，使当前状态随机地以不同的颜色跳跃。

获得所需内容的一个想法是考虑过渡和类切换：

let square = document.getElementById('square');
let time;

/* We intially add the class to trigger the transition*/
setTimeout(function(){square.classList.toggle('change')},10);

square.addEventListener('transitionend', duration);

/* When the transition is done we toggle the class to start another one*/
function duration() {
  time = Math.random() + 1;
  square.style.setProperty('--animation-time', time + 's');
  square.classList.toggle('change');
  console.log(time);
}

:root {
  --animation-time: 1s;
  --color-1: #ff0000;
  --color-2: #ffee00;
}

#square {
  width: 100px;
  height: 100px;
  transition: var(--animation-time) ease;
  background-color: var(--color-1);
}

#square.change {
  background-color: var(--color-2);
}

<div id="square"></div>

每次迭代的随机CSS动画时间

1 个答案: