animation ショートハンドプロパティ
最終更新：2026-09-13
animation animation ショートハンドプロパティ
animation は、animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state をまとめたショートハンドです。@keyframes と組み合わせることで、多段階でループ可能・一時停止可能なアニメーションシーケンスを定義できます。transition と異なり、トリガーなしで自動再生されるため、ローディング表示やカルーセル、呼吸（ブリージング）エフェクトなど継続的な視覚表現に最適です。
| カテゴリ | |
|---|---|
| 初期値 | none |
| 継承 | いいえ |
| 適用対象 | すべての要素 |
| アニメーションタイプ | discrete |
| CSS バージョン | CSS3 |
| 状態 | 標準 |
📝 構文
animation: [ none | <single-animation> ]#;
/* <single-animation> = <time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] */⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
<single-animation># | 値 | アニメーション短縮記法：名前・時間・タイミング関数・遅延・繰り返し回数・方向・フィルモード・再生状態 |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| animation | ✓ v43 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v30 |
| すべての主要ブラウザーでサポート | |||||
ヒント： 値の順序に意味はありませんが、時間として解析される最初の値が duration、2 番目が delay になります。キーフレーム名がキーワードと衝突しないよう注意してください。
重要： animation ショートハンドに animation-name が含まれていないと、宣言全体が無効になります。アニメーションを確実に再生するには、名前をショートハンド内に含めることをおすすめします。
❓ よくある質問
QCSS アニメーションを途中で一時停止し、また再開できますか？
Aできます。animation-play-state: paused で一時停止、running で再開します。最も一般的な使い方は :hover と組み合わせて「マウスを乗せている間アニメーションを一時停止」にすることです。一時停止中は現在のフレームに留まり、再開するとちょうど止めた場所から続きが再生されます。
Qアニメーションを一度だけ再生して最後のフレームで止めるには？
Aanimation-fill-mode: forwards を使うと、アニメーション終了後も要素を最後のキーフレームに保ちます。animation-iteration-count を 1 に設定します。開始前に初期状態を保ちたい場合は animation-fill-mode: both を使います。これが一度だけの登場・露出アニメーションを実行する標準的な方法です。
Qanimation ショートハンドで、2 つの時間値のどちらが duration でどちらが delay ですか？
A時間として解析される最初の値が duration、2 番目が delay です。animation: bounce 1.5s 0.5s ease では、1.5s が再生時間で、0.5s の遅延後に開始されます。時間が 1 つだけ指定された場合はそれが duration になり、delay は 0s が既定です。この 2 つの時間を逆にするのがショートハンドで最もありがちな間違いです。
QCSS アニメーションがカクカクしてコマ落ちします。どうすれば滑らかにできますか？
Atransform と opacity だけをアニメーションし、width、height、filter など各フレームで再描画・リフローを強いるプロパティは避けてください。アニメーション要素に will-change を付けて合成レイヤーを事前に作り、絶対配置でドキュメントフローから外します。animation-delay に負の値を使うと冒頭を飛ばして中盤に飛び込めます。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
