如何使“旋转动画”随机更改速度。 Fidget微调器动画。

Question

我为一个项目创建了这个动画fidget微调器。

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);} 
} 

Answer 1

一个posibility是嵌套多个容器，并设置了不同的动画为每一个 - 但你可以重用的关键帧他们。

播放使用时间等，你可以得到不同的效果：

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>