CSS アニメーションは CSS のモジュールの一つで、時間の経過とキーフレームによって CSS プロパティの値を動かすことができます。キーフレームアニメーションの動作は、タイミング関数、時間、繰り返し回数、その他の属性によって制御されます。
リファレンス
CSS プロパティ
CSS @-規則
ガイド
- CSS アニメーション対応の検出
- ブラウザーが CSS アニメーションに対応しているかを検出するテクニックを説明します。
- CSS アニメーションの使用
- CSS を使用してアニメーションを作成する方法についての一歩一歩進むチュートリアルです。この記事では、関連する CSS プロパティと @-規則、それに互いにどのように関係するのかを説明します。
- CSS アニメーションのコツとトリック
- CSS アニメーションを引き出すのに役立つコツやトリックです。現在、 API に対応が備わっていない、すでに完了に向けて実行されているアニメーションを再び再生するテクニックを紹介しています。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Animations | 草案 | 初回定義 |
ブラウザーの対応
animation プロパティ
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Edge Mobile | Android 版 Firefox | Android 版 Opera | iOS 版 Safari | Samsung Internet | |
| 基本対応 | Chrome
完全対応
43
| Edge
完全対応
12
| Firefox
完全対応
16
| IE 完全対応 10 | Opera
完全対応
30
| Safari
完全対応
あり
| WebView Android
完全対応
あり
| Chrome Android
完全対応
43
| Edge Mobile
完全対応
あり
| Firefox Android
完全対応
16
| Opera Android
完全対応
30
| Safari iOS
完全対応
あり
| Samsung Internet Android
完全対応
4.0
|
凡例
- 完全対応
- 完全対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
関連情報
- CSS アニメーションに関連して、 CSS トランジションはユーザーの操作に基づいてアニメーションを起動することができます。