CSS動畫是一種非常有趣且實用的技術(shù),可以讓網(wǎng)頁元素以吸引人的方式移動和變化,如果你想要讓CSS動畫一直動,那么你需要了解CSS動畫的關(guān)鍵幀(keyframes)和動畫屬性(animation)。
你需要定義一個動畫序列,這通常是通過CSS的@keyframes規(guī)則來完成的。@keyframes規(guī)則可以讓你創(chuàng)建多個關(guān)鍵幀,每個關(guān)鍵幀描述了一個狀態(tài),例如元素的位置、大小或顏色,你可以使用animation屬性將這個動畫序列應用到元素上。
為了讓動畫一直動,你需要設(shè)置animation屬性的值為repeat,這會讓動畫無限循環(huán)播放,你還可以設(shè)置duration屬性來控制動畫的持續(xù)時間,以及delay屬性來控制動畫開始前的延遲時間。
下面是一個簡單的例子,展示了一個元素在左右之間移動的CSS動畫:
@keyframes move-left-right { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } } .my-element { animation: move-left-right 5s repeat; }
在這個例子中,move-left-right
動畫序列會讓元素從左側(cè)移動到右側(cè),然后再移動到左側(cè),如此循環(huán)。animation
屬性中的repeat
關(guān)鍵字表示動畫會無限循環(huán)播放,5s
表示動畫的持續(xù)時間為5秒。
通過調(diào)整關(guān)鍵幀、duration和delay屬性,你可以創(chuàng)建各種復雜的CSS動畫效果,讓網(wǎng)頁更加生動有趣。