CSS3 提供了豐富的動畫特效,可以讓網(wǎng)頁更加生動有趣。而控制多個動畫,則是為了讓這些動畫互相協(xié)調(diào)、自然過渡。
首先,需要給每個動畫添加類名(class)或選擇器(selector),然后使用分號分隔不同的動畫屬性。
#myDiv { animation-name: fadeInOut, moveLeft; /* 這里的逗號即可將兩個動畫分開 */ animation-duration: 3s, 5s; animation-delay: 1s, 2s; animation-iteration-count: infinite, alternate; animation-timing-function: ease-in-out, linear; animation-fill-mode: backwards, forwards; }
上述代碼中,#myDiv 是需要添加動畫的元素,同時通過 animation-name 屬性指定了兩個動畫名稱,即 fadeInOut 和 moveLeft。通過逗號將它們隔開,表示同時播放這兩個動畫。
接下來,可以分別設置各個動畫的時間、延遲、播放次數(shù)、時間曲線和填充模式。這些屬性同樣使用逗號隔開,每個值對應一個動畫。
需要注意的是,如果兩個動畫的播放時間不一樣,那么時間較短的動畫會在時間較長的動畫播放完畢后停止,這點需要特別留意。
最后,其他的動畫屬性,如 animation-direction、animation-play-state 等也可以單獨設置。
通過這些方法,可以輕松地控制多個動畫的播放效果,實現(xiàn)更加炫酷的網(wǎng)頁動畫。
下一篇ios vue交互