CSSやJSを使ってこのドットアニメーションを実現する方法は？

Question

このGIFはdribbbleです。

私はここに私のコードの一部だ、純粋なCSSでdemoを書くことを試みた：彼らは全体として回転しません

@keyframes circles{ 
    0%{ 
    transform: scale(0) rotate(150deg); 
    } 
    100%{ 
    transform: scale(1) rotate(0deg); 
    } 
} 

。

gifの中央のミキシングアニメーションは必要ありません。回転効果を実現したいだけです。

誰かが私を助けることを願っています。

Answer 1

これは複合または入れ子になった動きです。ブレークダウンは以下のとおりです。

• 彼らは順番に移動するように見えるように、各ドットの開始時刻が最後からわずかにオフセットされ
• を旅するドット自体はちょうど内側に直線に沿ってスライドすると少し拡大縮小しています、それは渦巻きの錯覚を与える。
• 最後に、ドットはすべて回転するジョブだけの親要素の下にグループ化されます。

このアプローチに従えば、簡単な翻訳と回転アニメーションを各要素に適用しても、この渦巻き効果を得ることができます。

Answer 2

これは少し遅れているが、ここで私のjsfiddleは 'スピン' アニメーションがコンテナ

@keyframes spin{ 
    0%{ 
    transform: rotate(0deg); 
    } 
    100%{ 
    transform: rotate(360deg); 
    } 
} 

'重力子' のアニメーションに適用されるSoviutの回答

https://jsfiddle.net/hfpymtba/

@以下でありますサークルクラスに適用されます。

@keyframes graviton{ 
    100%{ 
    top:50%; 
    left:50%; 
    } 
} 

円はコンテナの中心のまわりに完全にはないので、ちょっとぐらぐらです。