- CSS3動(dòng)畫主要是通過(guò)animation這個(gè)屬性來(lái)進(jìn)行實(shí)現(xiàn)，使用動(dòng)畫的時(shí)候需要先進(jìn)行聲明動(dòng)畫然后再去調(diào)用，哪里需要產(chǎn)生動(dòng)畫效果哪里就使用animation進(jìn)行調(diào)用。

　　- 基本語(yǔ)法

 ```HTML

  <style>

      *{margin:0;padding:0}

      div{

          width:200px;

          height:200px;

          background-color:red;

          /*調(diào)用動(dòng)畫*/

          animation:movers 20s linear infinite alternate

      }

      /*聲明動(dòng)畫*/

      @keyframes movers{

          form{

              width:200px;

              height:200px;

              background-color:red;

          }

          to{

              width:400px;

              height:400px;

              background-color:green;

              border-radius:50%;

          }

   }

  </style>

  <div></div>

　　- 語(yǔ)法注意事項(xiàng)

　　animation:復(fù)合屬性

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

　　animation-duration 規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。

　　animation-timing-function 規(guī)定動(dòng)畫的速度曲線。

　　animation-delay 規(guī)定在動(dòng)畫開始之前的延遲。

　　animation-iteration-count 規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。

　　animation-direction 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。

　　form 初始狀態(tài)

　　to 結(jié)束裝填

　　可以替換成

　　0% 初始狀態(tài)

　　100% 結(jié)束狀態(tài)

　　后面的百分比可以稱之為關(guān)鍵幀動(dòng)畫

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