首頁 > web前端 > css教學 > 如何以不同的速度同時播放多個 CSS 動畫?

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

Patricia Arquette
發布: 2024-12-07 16:54:16
原創
276 人瀏覽過

How Can I Play Multiple CSS Animations Simultaneously at Different Speeds?

以不同的速度同時播放多個 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板