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 トランジションはユーザーの操作に基づいてアニメーションを起動することができます。