CSS @keyframes 規則

定義和用法

通過 @keyframes 規則，您能夠創建動畫。

創建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。

在動畫過程中，您能夠多次改變這套 CSS 樣式。

以百分比來規定改變發生的時間，或者通過關鍵詞 "from" 和 "to"，等價于 0% 和 100%。

0% 是動畫的開始時間，100% 動畫的結束時間。

提示：為了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。

提示：請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定。

注意：!important 規則在關鍵幀中被忽略（請參見本頁最后一個例子）。

另請參閱：

CSS3 教程：CSS3 動畫

實例

例子 1

使 div 元素勻速向下移動：

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

親自試一試

例子 2

在一個動畫中添加多個 keyframe 選擇器：

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

親自試一試

例子 3

在一個動畫中改變多個 CSS 樣式：

@keyframes mymove {
  0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}

親自試一試

例子 4

帶有多個 CSS 樣式的多個 keyframe 選擇器：

@keyframes mymove {
  0%   {top: 0px; left: 0px; background: red;}
  25%  {top: 0px; left: 100px; background: blue;}
  50%  {top: 100px; left: 100px; background: yellow;}
  75%  {top: 100px; left: 0px; background: green;}
  100% {top: 0px; left: 0px; background: red;}
}

親自試一試

例子 5

注意：!important 規則在關鍵幀中被忽略：

@keyframes myexample {
  from {top: 0px;}
  50%  {top: 100px !important;} /* 被忽略 */
  to   {top: 200px;}
}

親自試一試

CSS 語法

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

屬性值

值 描述
animationname 必需。定義動畫的名稱。
keyframes-selector

必需。動畫時長的百分比。

合法的值：

  • 0-100%
  • from（與 0% 相同）
  • to（與 100% 相同）
css-styles 必需。一個或多個合法的 CSS 樣式屬性。

瀏覽器支持

Chrome IE / Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-