可以讓頁面中指定的元素按照設定的方式“動”起來，運用的是人視覺延遲的原理，連續地在上一張圖消失之前插入下一張。

animation屬性值

1.animation-name

物件的動畫名稱，以便後續設定動畫屬性時使用

預設為none，如果設定的話即為要設定動畫的關鍵幀的名字

後續對該元素設定動畫時，要用@keyframes，設定起始的樣式（from）和終止的樣式（to）

2.animation-duration

動畫持續的時間（播放完成所花時間）

預設值為0，可設定單位為秒（s）或毫秒（ms）

3.animation-timing-function

動畫的過度方式

常用的有：linear（線性過渡）、ease（平滑過渡）、ease-in（由慢到快）、ease-out（由快到慢）、ease-in-out（由慢到快再到慢）

如有複雜需求，要設定貝塞爾曲線（cubic-bezier（數值1，數值2，數值3，數值4）），其中四個數值範圍為0-1

4.animation-delay

動畫開始前等待時間（該時間不包括在動畫放映時間內）

預設值為0，可設定單位為秒（s）或毫秒（ms），如設定負值則立即開始動畫

注：設定的時間帶有小數點時，建議省去整數部分，如0.5寫成.5

5.animation-interation-count

動畫迴圈次數

值為數字，預設為1，也可設定infinite（無限迴圈）

6.ainmation-direction

動畫迴圈時的方向

可設定的值有：none（保留原有樣式，預設值）、reverse（反向）、alternate（先正常再反向並交替進行）、alternate-reverse（先反向再正常並交替進行）

其中alternate和alternate-reverse必須在迴圈次數不為1時才生效

7.animation-fill-mode

動畫不播放（已經放完/有延遲沒播放）時的元素樣式

可設定的值有：none（沒有樣式，預設值）、forwards（結束時狀態）、backwards（開始時狀態）、both（同時設定開始和結束時狀態）

8.animation-play-state

動畫狀態，即播放/暫停

可設定的值有：running（播放，預設值）、pause（暫停）

9.animation的簡寫

其中必須設定name和duration

解析時，預設把第一個字串屬性值解析為name，第一個帶有時間的屬性值解析為duration

/*按照每個元素來寫的動畫屬性*/
div{
    width:100px;height:100px;
    animation-name:outside;
    animation-duration:2s;        
    animation-timing-function:linear;
    animation-delay:1s;
    animation-iteration-count:infinite;
    animation-direction:alternate-reverse;
    animation-fill-mode:forwards;
    animation-play-state:pause;
}
@keyframes outside{
    from{transform:translateY(0px);}
    to{transform:translateY(1000px);}
}

資源搜尋網站大全 http://www.szhdn.com 廣州VI設計公司https://www.houdianzi.com

keyframes

通過控制關鍵幀來改變動畫的播放效果，對手機端必須加上-webkit-

其中0%和100%可用from和to代替

div{
    width:100px;height:100px;background:black;
    animation:here 5s linear infinite alternate-reverse;
}
@-webkit-keyframes here{
       0% {capacity:0;}
     25% {capacity:0.25;}
     50% {capacity:0.5;}
     75% {capacity:0.75;}
    100% {capacity:1;}
}