由於語法不正確,給定的程式碼無法同時執行多個 CSS 動畫。若要使用多個動畫對元素進行動畫處理,應在動畫屬性中單獨聲明每個動畫,並以逗號分隔。
要達到非同步旋轉和縮放元素的所需效果:
聲明動畫屬性:
.image { animation: spin 2s linear infinite, scale 4s linear infinite; }
定義用於旋轉的旋轉動畫:
@-webkit-keyframes spin { 100% { transform: rotate(180deg); } }
定義用於成長的縮放動畫:
@-webkit-keyframes scale { 100% { transform: scaleX(2) scaleY(2); } }
修改後的程式碼允許兩種動畫同時播放,達到元素以不同速度旋轉和生長的效果。
以上是如何以不同的速度同時播放多個 CSS 動畫?的詳細內容。更多資訊請關注PHP中文網其他相關文章!