尝试在每次迭代时设置随机动画时间。我设置了 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
当您更改animation-duration您不会简单地更改每次迭代的方式，而是会更改整个动画。例如，如果您有3s作为持续时间，所以第一次迭代将花费3s如果在3s（迭代结束）你更改为5s这就像您创建另一个动画，其中迭代将持续 5 秒，然后您跳转到该新动画的新状态，即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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
