如何使“旋转动画”随机改变速度。指尖陀螺动画。答案

【问题标题】：How to make the "rotating animation" change speed at random. Fidget spinner animation.如何使“旋转动画”随机改变速度。指尖陀螺动画。
【发布时间】：2017-11-07 10:11:31
【问题描述】：

我为一个项目创建了这个动画指尖陀螺。

https://jsfiddle.net/e2tt2mao/450/

现在我只是使用 CSS 关键帧旋转对象。

但是我想知道如何使速度变化更加随机？例如，它以较慢的速度旋转的时间与它以较快的速度旋转的时间。

这是我想要的旋转动画类型的示例：https://68.media.tumblr.com/6b689487196da8bea9d540e203f7cd2e/tumblr_oqapg6uMXW1s5laego1_500.gif

@-webkit-keyframes spinnerRotate
{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinnerRotate
{
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(360deg);}
}
@-ms-keyframes spinnerRotate
{
    from{-ms-transform:rotate(0deg);}
    to{-ms-transform:rotate(360deg);}
}

【问题讨论】：

标签： javascript css animation jquery-animate css-animations

【解决方案1】：

一种可能性是嵌套多个容器，并为每个容器设置不同的动画 - 但您可以重用它们之间的关键帧。

玩弄时机等，可以得到不同的效果：

div {
   display: inline-block;
}

.inner {
  width: 200px;
  height: 200px;
  background-color: tomato;

}

.container {
   margin: 30px;
   animation: rotate 3s ease-in-out infinite;
}

.container2 {
   animation: rotate 5s ease-in-out infinite;
}

.container3 {
   animation: rotate 7s ease-in-out infinite;
   animation-direction: alternate-reverse;
}

@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

<div class="container">
<div class="container2">
<div class="container3">
<div class="inner">
</div>
</div>
</div>
</div>

【讨论】：