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-