如何以不同的速度同時播放多個 CSS 動畫？

以不同的速度同時播放多個 CSS 動畫

由於語法不正確，給定的程式碼無法同時執行多個 CSS 動畫。若要使用多個動畫對元素進行動畫處理，應在動畫屬性中單獨聲明每個動畫，並以逗號分隔。

要達到非同步旋轉和縮放元素的所需效果：

1. 聲明動畫屬性：

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

2. 定義用於旋轉的旋轉動畫：

   @-webkit-keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
   }

3. 定義用於成長的縮放動畫：

   @-webkit-keyframes scale {
    100% {
        transform: scaleX(2) scaleY(2);
    }
   }

修改後的程式碼允許兩種動畫同時播放，達到元素以不同速度旋轉和生長的效果。

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