亚洲区国产区激情区无码区,国产成人mv视频在线观看,国产A毛片AAAAAA,亚洲精品国产首次亮相在线

CSS 參考手冊(cè)

CSS @規(guī)則(RULES)

CSS 屬性大全

CSS @keyframes 規(guī)則

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

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

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

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

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

屬性值說(shuō)明

animationname：定義animation的名稱；

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

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

下面的示例顯示了實(shí)際@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%;}
      }
測(cè)試看看?/?

注意：如果關(guān)鍵幀選擇器指定了負(fù)百分比值或高于的值100%，則關(guān)鍵幀將被忽略。

參量

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

值描述
必需 -要使CSS有效，需要以下參數(shù)。
animation-name動(dòng)畫的名稱。
keyframes-selector指定沿動(dòng)畫持續(xù)時(shí)間的百分比。關(guān)鍵幀規(guī)則的關(guān)鍵幀聲明塊由屬性和值組成。

瀏覽器兼容性

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

瀏覽器圖標(biāo)

  • Firefox 5+ -moz-，16 +

  • Google Chrome 4+ -webkit-

  • Internet Explorer 10+

  • Apple Safari 4+ -webkit-

  • Opera 12+ -o-，15+ -webkit-

進(jìn)一步閱讀

請(qǐng)參考以下教程：CSS Media Types。