"回転アニメーション"をランダムに変化させる方法。 Fidgetスピナーアニメーション。

Question

私はこのアニメーション化されたfidgetスピナーをプロジェクト用に作成しました。今、私は、単にCSSのキーフレームを使用して、オブジェクトを回転させています

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

。

しかし、私はどのように速度の変化をよりランダムにするのだろうと思っていましたか？例えば、スピードが遅いスピードとスピードが速いスピードとを比較すると、ここで

は、私が希望スピンアニメーションのタイプの例である：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

一つ働かは巣にいくつかのコンテナであり、各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>