CSS3動畫是一種通過在網(wǎng)頁中添加樣式來制作過渡和動態(tài)效果的技術(shù)。動畫可以包括單個元素的變化、對象移動,以及復雜的運動效果。
動畫可根據(jù)不同情況確定是否需要循環(huán)執(zhí)行,CSS3提供了兩種方法實現(xiàn)動畫循環(huán)執(zhí)行:Animate.css和CSS3動畫循環(huán)語句。
.animate { animation: example 2s infinite; } @keyframes example { from {background-color: red;} to {background-color: yellow;} }
示例代碼可以實現(xiàn)背景色在2秒鐘內(nèi)從紅色變成黃色,然后循環(huán)執(zhí)行。其中,動畫執(zhí)行需要在 CSS3 中使用 @keyframes 規(guī)則,將動畫結(jié)果定義為每個過程的百分比。
CSS3 動畫循環(huán)可以在一定程度上提高網(wǎng)頁的顯示效果,同時也可以降低用戶等待的時間,使得動態(tài)效果更為流暢。