使用CSS動畫圖形輸入，然後繞中心圖形運行

Question

我有一個網站設計，我有7個圖形（所有相同的尺寸）。要求他們從一側飛入，沿着稍微彎曲的路線行進。第一個將進入中間，其他的將圍繞第一個進入軌道，直到所有6個均勻地圍繞它，此時它們全部停止。最後，中央圖形需要脈衝。

我不確定我是否已經很好地解釋過了！

不幸的是，有幾個不同的圖形，所以我不想簡單地把它作爲一個動畫gif，或其他什麼。例如，我已經看過幾篇文章，例如如何使用CSS來展示不斷繞軌道運行的航天器，或者沿着一條彎曲的路徑，但是我能夠按照我描述的方式設置它嗎？我如何使「故事」經歷這些階段？

TIA

Answer 1

使用CSS偏移路徑或運動的路徑，則可以創建用於每個元件的不同的路徑。爲每個元素的移動添加延遲，我認爲您可以創建這樣的動畫。

爲每個元素創建路徑並不容易，但here是一個關於使用CSS偏移路徑在圓形路徑上實現動畫的教程。