如何同時觸發多個不同速度的CSS動畫？

以不同的速度同時觸發多個CSS 動畫

在您的範例中，您的目標是同時觸發兩個涉及旋轉和縮放效果的CSS 動畫。但是，您遇到了僅播放後一個動畫的問題。

要解決此問題，正確的解決方案是使用逗號在單一動畫屬性中指定多個動畫。每個動畫可以有自己的一組屬性，包括持續時間和速度。

修改範例：

.image {
    ...
    animation: spin 2s linear infinite, scale 4s linear infinite;
}

說明：

在此修改後的程式碼中，我們定義動畫屬性以包含“旋轉”和“縮放”動畫，並用逗號。旋轉動畫每2秒循環一次，而縮放動畫每4秒循環一次。

將多個不同速度的動畫合併在一個動畫屬性中，可以達到以下效果：讓旋轉和生長動畫以各自的速度同時播放。

以上是如何同時觸發多個不同速度的CSS動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！