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

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

Patricia Arquette
發布: 2024-12-13 10:49:14
原創
434 人瀏覽過

How Can I Simultaneously Trigger Multiple CSS Animations with Different Speeds?

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

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

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

修改範例:

.image {
    ...
    animation: spin 2s linear infinite, scale 4s linear infinite;
}
登入後複製

說明:

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

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

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

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