CSS Reference

@keyframes

アニメーションの各キーフレームにおけるスタイルを定義する

@keyframes 規則はアニメーションの各キーフレームにおけるスタイルを定義します。定義したアニメーションは、animation-name プロパティによって要素と関連付けることで、使用できます。

その他、そのアニメーションの 1 サイクルあたりの実行時間 （開始から終了までにかかる時間） については animation-duration プロパティで、アニメーションが関連付けられた要素が読み込まれてから、実際にアニメーションが開始されるまでの遅延時間は animation-delay プロパティで設定するなど、定義したアニメーションに対して様々な設定を加えることができます。

つまり、@keyframes 規則によってアニメーション自体を定義しておき、animation-name プロパティをはじめとしたアニメーション関連プロパティによって実際の要素に関連付けて使用するという流れになります。

詳細説明

<custom-ident>

定義したキーフレームを識別する名前 （識別子） です。この名前は animation-name プロパティで要素に関連付けるアニメーションを指定する際に使用されます。

from

アニメーションの開始を示します。つまり 0% と同じ意味です。

to

アニメーションの終了を示します。つまり 100% と同じ意味です。

<percentage>

0% ～ 100% の間でキーフレームの位置を示します。

@keyframesのサンプルソース

@keyframes slide-right {
  from {
    margin-left: 0px;
  }
  50% {
    margin-left: 110px;
    opacity: 0.9;
  }
  to {
    margin-left: 200px;
  }
}

.animation-elm {
  animation-name: slide-right;
  animation-duration: 2s;
}
/*
同じキーフレームに複数のスタイル指定が存在する場合、それらはまとめられます。
*/

@keyframes slide-right {
  from {
    margin-left: 0px;
  }
  50% {
    margin-left: 110px;
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
  to {
    margin-left: 200px;
  }
}

/*
上記の 50% 部分は下記のようにまとめられます。

  50% {
    margin-left: 110px;
    opacity: 0.9;
  }
*/

主要ブラウザの対応

IE11 ○
Edge（EdgeHTML） ○
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連する@-規則

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome