CSSを使用して、中央の図形を入力して周回する図形をアニメーション化する

Question

私は7つの図形（すべて同じ寸法）を持つウェブサイトの設計をしています。要件は、わずかに湾曲した経路に沿って、ライン内の側から飛行機に入ることです。最初のものは真ん中に行き、残りの6つがすべて均等に取り囲まれるまで、最初のものの周りを周回軌道に乗ります。最後に、中央のグラフィックはパルスする必要があります。

私はそれを非常にうまく説明したかどうか分かりません！

残念ながら、これらの中にはグラフィックが異なるものがいくつかありますので、単純にアニメーションGIFなどとして作成したくありません。私は、例えば、宇宙船が惑星を絶えず周回していることを示すためにCSSを使う方法や、曲がった道をたどる方法を示すいくつかの記事を見てきましたが、私が記述する方法でこれを設定できますか？どのように私は "ストーリー"にフェーズを通過するのですか？

TIA CSSオフセットパスまたはモーションパスを使用して

Answer 1

、あなたは、要素ごとに異なるパスを作成することができます。各要素の動きに遅延を追加することで、このようなアニメーションを作成できると思います。

各要素のパスを作成するのは簡単ではありませんが、hereは、CSS offset-pathを使用して円形パスでアニメーションを実現する方法のチュートリアルです。