CSS @keyframes 規(guī)則

在css中，@keyframes規(guī)則可以使用來創(chuàng)建動畫，創(chuàng)建動畫是通過逐步改變從一個CSS樣式到另一個CSS樣式，在動畫過程中，您可以更改CSS樣式的設(shè)定多次，指定的變化時發(fā)生時使用％，或關(guān)鍵字"from"和"to"，這是和0％到100％相同，0％是開頭動畫，100％是當(dāng)動畫完成。為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義為0％和100％的選擇器。

@keyframes規(guī)則是css3中新增規(guī)則，目前主流瀏覽器都支持該規(guī)則（加瀏覽器對應(yīng)的前綴），但不兼容IE 9以及更早版本的瀏覽器。

@keyframes 規(guī)則的使用語法

該規(guī)則的語法如下：

@keyframes animationname {keyframes-selector {css-styles;}};

屬性值說明

animationname：定義animation的名稱；

keyframes-selector：動畫持續(xù)時間的百分比，可能的值：0-100%、from (和0%相同)、to (和100%相同)。您可以用一個動畫keyframes-selectors；

css-styles ：一個或多個合法的CSS樣式屬性；

下面的示例顯示了實際@keyframes的規(guī)則。

      .box {
          width: 50px;
          height: 50px;
          background: red;
          position: relative;
          /* Chrome, Safari, Opera */
          -webkit-animation-name: moveit;
          -webkit-animation-duration: 2s;
          
          animation-name: moveit;
          animation-duration: 2s;
      }
       
      /* Chrome, Safari, Opera */
      @-webkit-keyframes moveit {
          from {left: 0;}
          to {left: 50%;}
      }
       
      
      @keyframes moveit {
          from {left: 0;}
          to {left: 50%;}
      }

參量

下表描述了此規(guī)則的參數(shù)。

瀏覽器兼容性

@keyframes屬性瀏覽器的兼容性，下表中的數(shù)字表示支持該屬性的瀏覽器最低版本號；所有主流瀏覽器均支持該規(guī)則。

Firefox 5+ -moz-，16 + Google Chrome 4+ -webkit- Internet Explorer 10+ Apple Safari 4+ -webkit- Opera 12+ -o-，15+ -webkit-

進(jìn)一步閱讀

請參考以下教程：CSS Media Types。