CSS Animations (@keyframes) | Frontend Practical Guide

Widely available 安心して使用可能。すべての主要ブラウザで広くサポートされている。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`animation`	43	12	16	9	43	9
DOM API
`AnimationEvent` AnimationEvent インターフェイスは、アニメーションに関する情報を提供するイベントを表します。	43	12	5	9	43	9
`AnimationEvent` AnimationEvent() コンストラクターは、アニメーションに関するイベントを表す新しい AnimationEvent オブジェクトを返します。	43	14	23	9	43	9
`animationName` AnimationEvent.animationName は読み取り専用プロパティで、トランジションに関連付けられた CSS の animation-name の値を含む文字列です。	43	12	5	9	43	9
`elapsedTime` AnimationEvent.elapsedTime は読み取り専用のプロパティで、アニメーションが開始されてからの秒数を float 型で表します。このイベントが発生したとき、アニメーションが停止した場合を除いて常に設定されます。 Element/animationstart_event イベントにおいては elapsedTime は 0.0 になりますが、 animation-delay が負の値の場合は、このイベントは elapsedTime が (-1 * 待ち時間 ) であるときに発生します。	43	12	5	9	43	9
`pseudoElement` AnimationEvent.pseudoElement は読み取り専用のプロパティです。'::' で始まる文字列で、このアニメーションが実行される擬似要素の名前を示します。このアニメーションが擬似要素ではなく、要素上で動作している場合は、空文字列 '' になります。	68	79	23	13.1	68	13.4
`CSSAnimation` CSSAnimation はWeb Animations API のインターフェイスで、Animation オブジェクトを表します。	84	84	75	13.1	84	13.4
`animationName` animationName は CSSAnimation インターフェイスのプロパティで、 animation-name を返します。これは、要素に適用されるアニメーションを記述する 1 つ以上の keyframe アットルールを指定します。	84	84	75	13.1	84	13.4
`CSSKeyframeRule` CSSKeyframeRule インターフェイスは、指定されたキーフレームのスタイルセットを表すオブジェクトを提供します。 @keyframes アットルールの 1 つのキーフレームに対応しています。	31	12	48	9	31	9
`keyText` keyText は CSSKeyframeRule インターフェイスのプロパティで、キーフレームセレクターをパーセント値のカンマ区切りリストで表します。from と to キーワードは、それぞれ 0% と 100% に割り当てられます。	1	12	5	4	18	4
`style` style は CSSKeyframeRule インターフェイスのプロパティで、 @keyframes ルールの本体で有効な記述子を表す CSSStyleDeclaration オブジェクトです。	1	12	5	4	18	3.2
`CSSKeyframesRule` CSSKeyframesRule インターフェイスは、 CSS アニメーションにおけるキーフレームの完全なセットを表すオブジェクトを記述します。これは @keyframes アットルール全体の内容に対応します。	31	12	48	9.1	31	9.3
`appendRule` appendRule() は CSSKeyframeRule インターフェイスのメソッドで、 CSSKeyFrameRule をルールの末尾に追加します。	41	12	21	9.1	41	9.3
`cssRules` cssRules は CSSKeyframeRule インターフェイスの読み取り専用プロパティで、 CSSRuleList で keyframes アットルールのルールを返します。	1	12	5	4	18	3.2
`deleteRule` deleteRule() は CSSKeyframeRule インターフェイスのメソッドで、指定されたキーフレームセレクターに一致する CSSKeyFrameRule を削除します。	1	12	5	4	18	3.2
`findRule` findRule() は CSSKeyframeRule インターフェイスのメソッドで、指定されたキーフレームセレクターに一致する CSSKeyFrameRule を検索します。	1	12	5	4	18	3.2
`length` length は CSSKeyframesRule インターフェイスの読み取り専用プロパティで、リスト内の CSSKeyframeRule オブジェクトの数を返します。そのため、それぞれのキーフレームルールを CSSKeyframeRule オブジェクト上でインデックスによりアクセスすることができます。	123	123	109	17	123	17
`name` name は CSSKeyframeRule インターフェイスのプロパティで、 animation-name プロパティで使用されるアニメーションの名前を取得したり設定したりします。	1	12	5	4	18	3.2
その他
`css.at-rules.keyframes` @keyframes は CSS のアットルールで、アニメーションの流れに沿ったキーフレーム（または中間地点）のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します。これにより、アニメーションの中間ステップをトランジションよりも詳細に制御できます。	43	12	16	9	43	9
CSS @ ルール
`ignore important declarations` `! important` 宣言を無視する	45	79	19	10.1	45	10.3
`named range keyframes` 名前付きタイムライン範囲キーフレームセレクター	115	115		26	115	26
その他
`css.properties.animation-delay` animation-delay は CSS のプロパティで、要素にアニメーションを適用してからアニメーションが実行されるまでの待ち時間を指定します。アニメーションは未来のある時点から、直ちに最初から、または直ちにアニメーション周期の途中から始めることができます。	43	12	16	9	43	9
`css.properties.animation-direction` animation-direction は CSS のプロパティで、アニメーション再生の向きを順方向、逆方向、前後反転のいずれにするかを設定します。	43	12	16	9	43	9
CSS プロパティ
`alternate`	3	12	5	4	18	3.2
`alternate-reverse`	19	12	16	6	25	6
`normal`	3	12	5	4	18	3.2
`reverse`	19	12	16	6	25	6
その他
`css.properties.animation-duration` animation-duration は CSS のプロパティで、 1 回のアニメーション周期が完了するまでの再生時間を設定します。	43	12	16	9	43	9
CSS プロパティ
`auto` 「自動」値	115	115		18.4	115	18.4
その他
`css.properties.animation-fill-mode` animation-fill-mode は CSS のプロパティで、 CSS アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。	43	12	16	9	43	9
CSS プロパティ
`backwards`	3	12	5	5	18	4.2
`both`	3	12	5	5	18	4.2
`forwards`	3	12	5	5	18	4.2
`none`	3	12	5	5	18	4.2
その他
`css.properties.animation-iteration-count` animation-iteration-count は CSS のプロパティで、停止するまでにアニメーション周期が再生される回数を指定します。	43	12	16	9	43	9
CSS プロパティ
`infinite`	3	12	5	4	18	3.2
その他
`css.properties.animation-name` animation-name は CSS のプロパティで、要素に適用されるアニメーションを記述する 1 つまたは複数の @keyframes アットルールの名前を指定します。複数の @keyframes アットルールをカンマ区切りの文字列で指定します。指定した名前がどの @keyframes アットルールにも一致しない場合、プロパティはアニメーションしません。	43	12	16	9	43	9
CSS プロパティ
`none`	3	12	5	4	18	3.2
その他
`css.properties.animation-play-state` animation-play-state は CSS のプロパティで、アニメーションが実行中か停止中かを設定します。	43	12	16	9	43	9
CSS プロパティ
`paused`	3	12	5	4	18	3.2
`running`	3	12	5	4	18	3.2
その他
`css.properties.animation-timing-function` animation-timing-function は CSS のプロパティで、アニメーションがそれぞれの周期の中でどのように進行するかを設定します。	43	12	16	9	43	9
CSS プロパティ
`ease`	3	12	5	4	18	3.2
`ease-in`	3	12	5	4	18	3.2
`ease-in-out`	3	12	5	4	18	3.2
`ease-out`	3	12	5	4	18	3.2
`jump` `steps()` の `jump-` キーワード	77	79	65	14	77	14
`linear`	3	12	5	4	18	3.2
`step-end`	3	12	5	4	18	3.2
`step-start`	3	12	5	4	18	3.2
`alternate`	3	12	5	4	18	3.2
`alternate-reverse`	3	12	5	4	18	3.2
`auto`	3	12	5	4	18	3.2
`backwards`	3	12	5	4	18	3.2
`both`	3	12	5	4	18	3.2
`ease`	3	12	5	4	18	3.2
`ease-in`	3	12	5	4	18	3.2
`ease-in-out`	3	12	5	4	18	3.2
`ease-out`	3	12	5	4	18	3.2
`forwards`	3	12	5	4	18	3.2
`infinite`	3	12	5	4	18	3.2
`linear`	3	12	5	4	18	3.2
`none`	3	12	5	4	18	3.2
`normal`	3	12	5	4	18	3.2
`reverse`	3	12	5	4	18	3.2
`step-end`	3	12	5	4	18	3.2
`step-start`	3	12	5	4	18	3.2
その他
`css.types.time` は CSS のデータ型で、時間の値を秒単位またはミリ秒単位で表現します。これは animation や transition および関連するプロパティで使用されています。	1	12	4	3.1	18	2

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS

/* Bounce animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

.ball {
  animation: bounce 0.8s ease-in-out infinite;
}

/* Rotation animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1.5s linear infinite;
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

ライブデモ

Bounce

CSS Animations (@keyframes) Bounce demo.

プレビュー全画面表示

Rotatespinner

CSS Animations (@keyframes) Rotatespinner demo.

プレビュー全画面表示

palspulse

CSS Animations (@keyframes) palspulse demo.

プレビュー全画面表示

実務での使いどころ

ローディングアニメーション

スピナーやプログレスバーなど、繰り返しのアニメーションをCSSだけで実装できる。
注目を引くUI演出

要素の出現時にフェードインやスライドインを加え、ユーザーの視線を誘導する。

注意点

過度なアニメーションはユーザー体験を損なうため、必要最小限にとどめる。
prefers-reduced-motion メディアクエリでアニメーションを無効化できるようにする。

対応ブラウザ

基本構文

ライブデモ

Bounce

Rotatespinner

palspulse

実務での使いどころ

ローディングアニメーション

注目を引くUI演出

注意点

アクセシビリティ

参考リンク