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

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，这就像您创建了另一个动画，迭代将持续5s，然后跳到新动画的一个新状态，即3s of 5s。

下面是一个更好地说明这个问题的例子。我将继续增加持续时间，您将注意到，一旦您到达迭代结束，您将返回到以前的状态，因为您增加了持续时间，然后您将再次到达最后的状态，然后您将返回等等。

就像有人跑到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>

​