網(wǎng)站制作中動(dòng)畫效果是吸引用戶的重要方式之一，而CSS動(dòng)畫是一種無需借助JS就能添加動(dòng)畫效果的方法。

在CSS中使用@keyframes來制作動(dòng)畫效果，來改變?cè)禺?dāng)前的樣式。通過animation來為不同的元素設(shè)置@keyframes的動(dòng)畫。

在@keyframes中可以通過from和to或百分比來設(shè)置元素如何變化，在需要?jiǎng)赢嬓Ч脑刂型ㄟ^animation-name來確定是那個(gè)@keyframes設(shè)置的動(dòng)畫，使用animation-duration來設(shè)置動(dòng)畫完成的周期為多長時(shí)間，通過animation-timing-function來設(shè)定動(dòng)畫的運(yùn)行速度，animation-delay來設(shè)置動(dòng)畫何時(shí)開始默認(rèn)為0，animation-iteration-count來規(guī)定動(dòng)畫的時(shí)間默認(rèn)為1，通常使用infinite表示無限次，animation-direction表示動(dòng)畫結(jié)束后下一次反方向播放默認(rèn)為normal，可以設(shè)置為alternate表示下一次反方向播放，animation-play-state表示動(dòng)畫是否運(yùn)行默認(rèn)running，可以通過JS設(shè)置成paused表示動(dòng)畫暫停。通常情況下我們會(huì)使用animation來簡寫。