- CSS3動畫主要是通過animation這個屬性來進行實現，使用動畫的時候需要先進行聲明動畫然后再去調用，哪里需要產生動畫效果哪里就使用animation進行調用。

　　- 基本語法

 ```HTML

  <style>

      *{margin:0;padding:0}

      div{

          width:200px;

          height:200px;

          background-color:red;

          /*調用動畫*/

          animation:movers 20s linear infinite alternate

      }

      /*聲明動畫*/

      @keyframes movers{

          form{

              width:200px;

              height:200px;

              background-color:red;

          }

          to{

              width:400px;

              height:400px;

              background-color:green;

              border-radius:50%;

          }

   }

  </style>

  <div></div>

　　- 語法注意事項

　　animation:復合屬性

　　animation-name 規定需要綁定到選擇器的 keyframe 名稱。。

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

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

　　animation-delay 規定在動畫開始之前的延遲。

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

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

　　form 初始狀態

　　to 結束裝填

　　可以替換成

　　0% 初始狀態

　　100% 結束狀態

　　后面的百分比可以稱之為關鍵幀動畫

　　更多關于前端培訓的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。