“@keyframes”關鍵幀：自定義一些動畫名稱，規定什麼時間做什麼動作。即“@keyframes”後面跟著動畫名稱加上一對花括號“{...}”,花括號中是不同時間段樣式。

例如

      @keyframes changecolor {

           0%{

                    background : red;

                }

           100%{

                    background : yellow;

               }

        }

animation 屬性是一個簡寫屬性，用於設定八個動畫屬性：

1. animation-name                 keyframes名稱

2. animation-duration             指定完成動畫所花費的時間，以秒或毫秒計

3. animation-timing-function   指定動畫的速度曲線

4. animation-delay                 指定在動畫開始之間的延遲

5. animation-iteration-count   指定動畫應該播放的次數

6. animation-direction            指定是否應該輪流反向播放動畫

7. animation-fill-mode            指定當動畫不播放時（當動畫完成時或動畫有一個延遲未開始播放時），要應用                                              到的樣式

8. animation-play-state          指定動畫是否正在執行或已暫停

animation-timing-function  指定動畫的速度曲線

1.linear           勻速

2.ease             預設，動畫以低速開始，然後加快，在結束前變慢。

3.ease-in         緩慢開始（加速）

4.ease-out       緩慢結束（減速）

5.ease-in-out   緩慢開始，緩慢結束（先加速後減速）

animation-delay   動畫開始之間的延遲

1.單位是秒或毫秒

2.可以是負值，-2秒錶示動畫立馬開始，但跳過2秒進入動畫，即前兩秒的動畫不執行，直接跳過前兩秒進入動畫。

animation-iteration-count    指定動畫應該播放的次數

預設1次，可以設定2次，3次.......infinite表示無限

animation-direction    是否應該輪流反向播放動畫

 animation-fill-mode     指定當動畫不播放時（當動畫完成時或動畫有一個延遲未開始播放時），要應用到的樣式

animation-play-state            指定動畫是否正在執行或已暫停

paused        指定暫停動畫

running       指定正在執行的動畫

（使用animation實現視訊播放效果的時候）