在現(xiàn)在的網(wǎng)站建設(shè)中動畫效果已經(jīng)成為一個有吸引力網(wǎng)站不必可少的效果了，常見的動畫效果都是通過animation或JS來實現(xiàn)的，其中一些簡單的無需操作的動畫都會使用CSS的animation屬性來實現(xiàn)。

網(wǎng)站的動畫主要有幾個概念：

幀：動畫過程中每一幅靜止的動畫叫做一幀。

幀率：一秒中靜止動畫的數(shù)量，單位為fps。

幀時長：每一幅靜止動畫的時長，單位為ms。

而通過animation來實現(xiàn)動畫效果有三步：

1，聲明動畫：通過@keyframes來聲明一個動畫，其作用就是用來定義每一幀的動畫，主要用于控制animation的效果。

2，調(diào)用動畫：通過animation來為對應(yīng)的元素調(diào)用@keyframes聲明的動畫，使其沿著@keyframes中定義的每一幀動畫運行，還可以通過animation來定義播放的一些屬性如時間，播放順序，延時等。

3，觸發(fā)動畫：通過一定的觸發(fā)方式來觸發(fā)這些動畫效果，可以是默認(rèn)開啟也可以是通過JS控制等。

其中animation是一個復(fù)合屬性，主要就是用來調(diào)用已經(jīng)聲明好的@keyframes動畫，其中具體的屬性為：

animation-name：用來定義動畫的名稱，要和@keyframea聲明的對應(yīng)的動畫名稱相同才能調(diào)用對應(yīng)的動畫效果。

animation-duration：用來定義動畫的執(zhí)行時間，動畫會在定義的時間內(nèi)完成，單位為s或ms。

animation-timing-function：用來定義動畫的播放曲線，一般來說都是默認(rèn)值。

animation-delay：用來定義動畫的延時播放，單位為s或ms。

animation-iteration-count：用來定義動畫的播放次數(shù)默認(rèn)為1，一般設(shè)置為infinite指無限播放。

animation-direction：用來定義動畫的播放方向，可以設(shè)置下一次動畫反方向運行。

animation-play-state：用來定義動畫是否播放，可以通過JS來進(jìn)行動態(tài)的修改。

animation-fill-mode：用來定義動畫完成后是否保留最后一幀的動畫，如果不保留都會動畫完成后就會返回動畫的第一幀，通常用在只執(zhí)行一次的動畫效果中。

總的來說animation的屬性還是比較多的，用的次數(shù)不多的情況下還是使用具體的某個屬性來完成動畫效果，使用熟練的話animation還是很方便的?，F(xiàn)在大部分的動畫效果和動畫庫也是通過animation來完成的，主要還是要前端開發(fā)者自己去具體的想一想這個動畫中每一幀的動畫走向是怎么樣的才能做好一個好的動畫使用于網(wǎng)站上。