CSS アニメーションは、時間の経過とキーフレームによって CSS プロパティの値を動かすことができる CSS のモジュールです。キーフレームアニメーションの動作は、タイミング関数、時間、繰り返し回数、その他の属性によって制御されます。

リファレンス

CSS プロパティ

CSS @-規則

ガイド

CSS アニメーション対応の検出
ブラウザーが CSS アニメーションに対応しているかを検出するテクニックを説明します。
CSS アニメーションの使用
CSS を使用してアニメーションを作成する方法についての一歩一歩進むチュートリアルです。この記事では、関連する CSS プロパティと @-規則、それに互いにどのように関係するのかを説明します。
CSS アニメーションのコツとトリック
CSS アニメーションを引き出すのに役立つコツやトリックです。現在、 API に対応が備わっていない、すでに完了に向けて実行されているアニメーションを再び再生するテクニックを紹介しています。

仕様書

仕様書 策定状況 コメント
CSS Animations 草案 初回定義

ブラウザーの対応

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本対応 (有)-webkit
43.0
(有) 5.0 (5.0)-moz
16.0 (16.0)
10 12-o
12.10[2]
4.0-webkit
機能 Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本対応 2.1 -webkit [1]
4.0 -webkit
(有) 5.0 (5.0)-moz
16.0 (16.0)
? ? (有)-webkit

[1] 部分的な対応: Android browser 2.3 以前では、 animation-fill-mode プロパティに対応していません。

[2] Opera 12.50 のリリースノートを参照。

関連情報

  • CSS アニメーションに関連して、 CSS トランジションはユーザーの操作に基づいてアニメーションを起動することができます。

 

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, teoli
最終更新者: mfuji09,