前端面試篇：CSS3動畫是怎么實現(xiàn)的？

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

　　- 基本語法

 ```HTML

  <style>

      *{margin:0;padding:0}

      div{

          width:200px;

          height:200px;

          background-color:red;

          /*調(diào)用動畫*/

          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:復(fù)合屬性

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

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

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

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

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

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

　　form 初始狀態(tài)

　　to 結(jié)束裝填

　　可以替換成

　　0% 初始狀態(tài)

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

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

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