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

　　- 基本語(yǔ)法

 ```HTML

  <style>

      *{margin:0;padding:0}

      div{

          width:200px;

          height:200px;

          background-color:red;

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

          animation:movers 20s linear infinite alternate

      }

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

      @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 名稱(chēng)。。

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

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

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

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

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

　　form 初始狀態(tài)

　　to 結(jié)束裝填

　　可以替換成

　　0% 初始狀態(tài)

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

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

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