CSS 動畫

CSS 動畫

CSS 可實現 HTML 元素的動畫效果，而不使用 JavaScript 或 Flash！

CSS

在本章中，您將學習如下屬性：

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

對動畫的瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

屬性 Chrome IE Firefox Safari Opera
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

什么是 CSS 動畫？

動畫使元素逐漸從一種樣式變為另一種樣式。

您可以隨意更改任意數量的 CSS 屬性。

如需使用 CSS 動畫，您必須首先為動畫指定一些關鍵幀。

關鍵幀包含元素在特定時間所擁有的樣式。

@keyframes 規則

如果您在 @keyframes 規則中指定了 CSS 樣式，動畫將在特定時間逐漸從當前樣式更改為新樣式。

要使動畫生效，必須將動畫綁定到某個元素。

下面的例子將 "example" 動畫綁定到 <div> 元素。動畫將持續 4 秒鐘，同時將 <div> 元素的背景顏色從 "red" 逐漸改為 "yellow"：

實例

/* 動畫代碼 */
@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 屬性，則動畫不會發生，因為默認值是 0s（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％ 以及動畫完成 100％ 時更改背景顏色和 <div> 元素的位置：

實例

/* 動畫代碼 */
@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) - 運行您在三次貝塞爾函數中定義自己的值

下面這些例子展示了可以使用的一些不同速度曲線：

實例

#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 - 元素將獲取由第一個關鍵幀設置的樣式值（取決于 animation-direction），并在動畫延遲期間保留該值。
  • 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-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

親自試一試

使用簡寫的 animation 屬性也可以實現與上例相同的動畫效果：

實例

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

親自試一試

CSS 動畫屬性

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

屬性 描述
@keyframes 規定動畫模式。
animation 設置所有動畫屬性的簡寫屬性。
animation-delay 規定動畫開始的延遲。
animation-direction 定動畫是向前播放、向后播放還是交替播放。
animation-duration 規定動畫完成一個周期應花費的時間。
animation-fill-mode 規定元素在不播放動畫時的樣式（在開始前、結束后，或兩者同時）。
animation-iteration-count 規定動畫應播放的次數。
animation-name 規定 @keyframes 動畫的名稱。
animation-play-state 規定動畫是運行還是暫停。
animation-timing-function 規定動畫的速度曲線。