如何使「旋轉動畫」隨機更改速度。 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>