CSS動畫@keyframes的用法

CSS動畫

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

動畫瀏覽器支持

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

什么是CSS動畫？

動畫允許元素從一種樣式逐漸變為另一種樣式。您可以根據需要多次更改所需的CSS屬性。要使用CSS動畫，必須首先為動畫指定一些關鍵幀。關鍵幀保持元素在特定時間具有的樣式。

@keyframes規則

在@keyframes規則中指定CSS樣式時，動畫將在特定時間逐漸從當前樣式更改為新樣式。要使動畫生效，必須將動畫綁定到元素。以下示例將“example”動畫綁定到<div>元素。動畫將持續4秒，并且會逐漸將<div>元素的背景顏色從“紅色”更改為“×××”：

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

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

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

以下示例將在動畫完成25％，完成50％時再次更改背景顏色和<div>元素的位置，并在動畫完成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;}
                        }
                        /* 將動畫應用到元素 */
                        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;
                }

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

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

設置動畫應運行多少次

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

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

以下示例使用值“infinite”使動畫永遠繼續：

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

以反向或備用循環運行動畫

animation-direction屬性指定動畫是應該向前，向后還是以交替周期播放。 animation-direction屬性可以具有以下值：
normal - 動畫正常播放（前進）。這是默認的
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 - 指定慢啟動的動畫，然后快速，然后緩慢結束（這是默認設置）
linear - 指定從開始到結束具有相同速度的動畫
ease-in - 指定啟動慢的動畫
ease-out - 指定慢速結束的動畫
ease-in-out - 指定開始和結束較慢的動畫
cubic-bezier(n,n,n,n) - 允許您在cubic-bezier函數中定義自己的值
以下示例顯示了可以使用的一些不同速度曲線：

                #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動畫在播放第一個關鍵幀之前或播放最后一個關鍵幀之后不會影響元素。animation-fill-mode屬性可以覆蓋此行為 animation-fill-mode動畫未播放時（在開始之前，結束之后或兩者都有），該屬性指定目標元素的樣式。 animation-fill-mode屬性可以具有以下值：
none- 默認值。動畫在執行之前或之后不會對元素應用任何樣式
forwards - 元素將保留由最后一個關鍵幀設置的樣式值（取決于animation-direction和animation-iteration-count）
backwards - 元素將獲取由第一個關鍵幀設置的樣式值（取決于動畫方向），并在動畫延遲期間保留此值
both - 動畫將遵循向前和向后的規則，在兩個方向上擴展動畫屬性
以下示例允許<div>元素在動畫結束時保留最后一個關鍵幀的樣式值：

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

以下示例允許<div>元素獲取動畫開始前（動畫延遲期間）第一個關鍵幀設置的樣式值：

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

以下示例允許<div>元素在動畫開始之前獲取由第一個關鍵幀設置的樣式值，并在動畫結束時保留最后一個關鍵幀的樣式值：

            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規則和所有CSS動畫屬性：