CSS動畫@keyframes的用法

CSS動畫

CSS動畫允許大多數(shù)HTML元素的動畫，而無需使用JavaScript或Flash！

成都創(chuàng)新互聯(lián)公司是一家業(yè)務(wù)范圍包括IDC托管業(yè)務(wù),網(wǎng)絡(luò)空間、主機(jī)租用、主機(jī)托管，四川、重慶、廣東電信服務(wù)器租用,南充服務(wù)器托管，成都網(wǎng)通服務(wù)器托管,成都服務(wù)器租用,業(yè)務(wù)范圍遍及中國大陸、港澳臺以及歐美等多個國家及地區(qū)的互聯(lián)網(wǎng)數(shù)據(jù)服務(wù)公司。

動畫瀏覽器支持

IE10+支持該屬性的。其他低瀏覽器版本數(shù)字后跟-ms-， -webkit-，-moz-或-o-指定使用前綴的第一個版本。

什么是CSS動畫？

動畫允許元素從一種樣式逐漸變?yōu)榱硪环N樣式。您可以根據(jù)需要多次更改所需的CSS屬性。要使用CSS動畫，必須首先為動畫指定一些關(guān)鍵幀。關(guān)鍵幀保持元素在特定時間具有的樣式。

@keyframes規(guī)則

在@keyframes規(guī)則中指定CSS樣式時，動畫將在特定時間逐漸從當(dāng)前樣式更改為新樣式。要使動畫生效，必須將動畫綁定到元素。以下示例將“example”動畫綁定到

元素。動畫將持續(xù)4秒，并且會逐漸將

元素的背景顏色從“紅色”更改為“×××”：

               /* 動畫代碼 */
              @keyframes example {
                  from {background-color: red;}
                  to {background-color: yellow;}
                }
                /* 要將動畫應(yīng)用到的元素 */
                div {
                  width: 100px;
                  height: 100px;
                  background-color: red;
                  animation-name: example;
                  animation-duration: 4s;
                }

注意：該animation-duration屬性定義動畫完成所需的時間。如果animation-duration未指定該屬性，則不會發(fā)生動畫，因為默認(rèn)值為0（0秒）。在上面的示例中，我們通過使用關(guān)鍵字“from”和“to”（表示0％（開始）和100％（完成））指定樣式何時更改。也可以使用百分比。通過使用百分比，您可以根據(jù)需要添加任意數(shù)量的樣式更改。當(dāng)動畫完成25％，完成50％時，以及動畫100％完成時，以下示例將更改

元素的背景顏色：

                       /* 動畫代碼 */
                       @keyframes example {
                          0%   {background-color: red;}
                          25%  {background-color: yellow;}
                          50%  {background-color: blue;}
                          100% {background-color: green;}
                        }
                        /* 將動畫應(yīng)用到元素 */
                        div {
                          width: 100px;
                          height: 100px;
                          background-color: red;
                          animation-name: example;
                          animation-duration: 4s;
                        }

以下示例將在動畫完成25％，完成50％時再次更改背景顏色和

元素的位置，并在動畫完成100％時再次更改：

                        /* 動畫代碼 */
                        @keyframes example {
                          0%   {background-color:red; left:0px; top:0px;}
                          25%  {background-color:yellow; left:200px; top:0px;}
                          50%  {background-color:blue; left:200px; top:200px;}
                          75%  {background-color:green; left:0px; top:200px;}
                          100% {background-color:red; left:0px; top:0px;}
                        }
                        /* 將動畫應(yīng)用到元素 */
                        div {
                          width: 100px;
                          height: 100px;
                          position: relative;
                          background-color: red;
                          animation-name: example;
                          animation-duration: 4s;
                        }

##延遲動畫
animation-delay屬性指定動畫開始的延遲。以下示例在開始動畫之前有2秒的延遲：

          div {
                  width: 100px;
                  height: 100px;
                  position: relative;
                  background-color: red;
                  animation-name: example;
                  animation-duration: 4s;
                  animation-delay: 2s;
                }

也允許負(fù)值。如果使用負(fù)值，動畫將像已經(jīng)播放N秒一樣開始。在以下示例中，動畫將像已經(jīng)播放2秒一樣開始：

         div {
                  width: 100px;
                  height: 100px;
                  position: relative;
                  background-color: red;
                  animation-name: example;
                  animation-duration: 4s;
                  animation-delay: -2s;
               }

設(shè)置動畫應(yīng)運行多少次

animation-iteration-count屬性指定動畫應(yīng)運行的次數(shù)。以下示例將在停止之前運行動畫3次：

          div {
                  width: 100px;
                  height: 100px;
                  position: relative;
                  background-color: red;
                  animation-name: example;
                  animation-duration: 4s;
                  animation-iteration-count: 3;
                }

以下示例使用值“infinite”使動畫永遠(yuǎn)繼續(xù)：

           div {
                  width: 100px;
                  height: 100px;
                  position: relative;
                  background-color: red;
                  animation-name: example;
                  animation-duration: 4s;
                  animation-iteration-count: infinite;
                }

以反向或備用循環(huán)運行動畫

animation-direction屬性指定動畫是應(yīng)該向前，向后還是以交替周期播放。 animation-direction屬性可以具有以下值：
normal - 動畫正常播放（前進(jìn)）。這是默認(rèn)的
reverse - 動畫以反向播放（向后）
alternate - 動畫首先向前播放，然后向后播放
alternate-reverse - 首先向后播放動畫，然后向前播放動畫
以下示例將以反向（向后）運行動畫：

          div {
                  width: 100px;
                  height: 100px;
                  position: relative;
                  background-color: red;
                  animation-name: example;
                  animation-duration: 4s;
                  animation-direction: reverse;
                }

以下示例使用值“alternate”使動畫首先向前運行，然后向后運行：

           div {
                  width: 100px;
                  height: 100px;
                  position: relative;
                  background-color: red;
                  animation-name: example;
                  animation-duration: 4s;
                  animation-iteration-count: 2;
                  animation-direction: alternate;
                }

以下示例使用值“alternate-reverse”使動畫首先向后運行，然后向前運行：

           div {
                  width: 100px;
                  height: 100px;
                  position: relative;
                  background-color: red;
                  animation-name: example;
                  animation-duration: 4s;
                  animation-iteration-count: 2;
                  animation-direction: alternate-reverse;
                }

指定動畫的速度曲線

animation-timing-function屬性指定動畫的速度曲線。 animation-timing-function屬性可以具有以下值：
ease - 指定慢啟動的動畫，然后快速，然后緩慢結(jié)束（這是默認(rèn)設(shè)置）
linear - 指定從開始到結(jié)束具有相同速度的動畫
ease-in - 指定啟動慢的動畫
ease-out - 指定慢速結(jié)束的動畫
ease-in-out - 指定開始和結(jié)束較慢的動畫
cubic-bezier(n,n,n,n) - 允許您在cubic-bezier函數(shù)中定義自己的值
以下示例顯示了可以使用的一些不同速度曲線：

                #div1 {animation-timing-function: linear;}
                #div2 {animation-timing-function: ease;}
                #div3 {animation-timing-function: ease-in;}
                #div4 {animation-timing-function: ease-out;}
                #div5 {animation-timing-function: ease-in-out;}

為動畫指定填充模式

CSS動畫在播放第一個關(guān)鍵幀之前或播放最后一個關(guān)鍵幀之后不會影響元素。animation-fill-mode屬性可以覆蓋此行為 animation-fill-mode動畫未播放時（在開始之前，結(jié)束之后或兩者都有），該屬性指定目標(biāo)元素的樣式。 animation-fill-mode屬性可以具有以下值：
none- 默認(rèn)值。動畫在執(zhí)行之前或之后不會對元素應(yīng)用任何樣式
forwards - 元素將保留由最后一個關(guān)鍵幀設(shè)置的樣式值（取決于animation-direction和animation-iteration-count）
backwards - 元素將獲取由第一個關(guān)鍵幀設(shè)置的樣式值（取決于動畫方向），并在動畫延遲期間保留此值
both - 動畫將遵循向前和向后的規(guī)則，在兩個方向上擴(kuò)展動畫屬性
以下示例允許

元素在動畫結(jié)束時保留最后一個關(guān)鍵幀的樣式值：

           div {
                  width: 100px;
                  height: 100px;
                  background: red;
                  position: relative;
                  animation-name: example;
                  animation-duration: 3s;
                  animation-fill-mode: forwards;
                }

以下示例允許

元素獲取動畫開始前（動畫延遲期間）第一個關(guān)鍵幀設(shè)置的樣式值：

           div {
                  width: 100px;
                  height: 100px;
                  background: red;
                  position: relative;
                  animation-name: example;
                  animation-duration: 3s;
                  animation-delay: 2s;
                  animation-fill-mode: backwards;
                }

以下示例允許

元素在動畫開始之前獲取由第一個關(guān)鍵幀設(shè)置的樣式值，并在動畫結(jié)束時保留最后一個關(guān)鍵幀的樣式值：

            div {
                  width: 100px;
                  height: 100px;
                  background: red;
                  position: relative;
                  animation-name: example;
                  animation-duration: 3s;
                  animation-delay: 2s;
                  animation-fill-mode: both;
                }

動畫簡寫屬性
下面的示例使用了六個動畫屬性：

            div {
                  animation: example 5s linear 2s infinite alternate;
                }

CSS動畫屬性
下表列出了@keyframes規(guī)則和所有CSS動畫屬性：

屬性	描述
@keyframes	指定動畫代碼
animation	設(shè)置所有動畫屬性的簡寫屬性
animation-delay	指定動畫開始的延遲
animation-direction	指定動畫是向前播放、向后播放還是交替播放
animation-duration	指定動畫完成一個循環(huán)需要多長時間
animation-fill-mode	指定動畫不播放時元素的樣式(在動畫開始前、結(jié)束后或同時播放)
animation-iteration-count	指定動畫播放的次數(shù)
animation-name	指定@keyframes動畫的名稱
animation-play-state	指定動畫是運行還是暫停
animation-timing-function	指定動畫的速度曲線