CSS3中,可以通過使用animation
屬性來同時執(zhí)行兩個動畫。animation
屬性可以接收多個值,每個值代表一個動畫,這些動畫會按照指定的順序和時間表來播放。
假設(shè)我們有兩個動畫animation1
和animation2
,我們可以這樣寫CSS:
div { animation: animation1 5s linear, animation2 10s ease-in-out; }
上述代碼表示,div
元素會先執(zhí)行animation1
動畫,持續(xù)時間為5秒,速度為線性;然后執(zhí)行animation2
動畫,持續(xù)時間為10秒,速度為緩入緩出。
需要注意的是,如果兩個動畫的持續(xù)時間不同,那么后一個動畫會在前一個動畫結(jié)束后開始播放,如果兩個動畫的持續(xù)時間相同,那么它們會同時開始播放。
還可以通過使用@keyframes
規(guī)則來定義更復(fù)雜的動畫序列,在這種情況下,每個@keyframes
規(guī)則定義了一個關(guān)鍵幀序列,然后通過animation
屬性來指定哪些關(guān)鍵幀序列應(yīng)該被播放。
CSS3提供了強大的動畫功能,可以通過多種方式來實現(xiàn)同時執(zhí)行兩個動畫的效果。