以不同的速度同時觸發多個CSS 動畫
在您的範例中,您的目標是同時觸發兩個涉及旋轉和縮放效果的CSS 動畫。但是,您遇到了僅播放後一個動畫的問題。
要解決此問題,正確的解決方案是使用逗號在單一動畫屬性中指定多個動畫。每個動畫可以有自己的一組屬性,包括持續時間和速度。
修改範例:
.image { ... animation: spin 2s linear infinite, scale 4s linear infinite; }
說明:
在此修改後的程式碼中,我們定義動畫屬性以包含“旋轉”和“縮放”動畫,並用逗號。旋轉動畫每2秒循環一次,而縮放動畫每4秒循環一次。
將多個不同速度的動畫合併在一個動畫屬性中,可以達到以下效果:讓旋轉和生長動畫以各自的速度同時播放。
以上是如何同時觸發多個不同速度的CSS動畫?的詳細內容。更多資訊請關注PHP中文網其他相關文章!