CSSのanimation-durationの使い方：指定値・実例・効かない原因とブラウザー互換性
animation-durationの役割と主な指定値を解説。同じキーフレームを再生する速さが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。
animation-duration は、キーフレーム名、時間、繰り返し回数です。この記事では、1.5s と 0.4s を比較して、表示の違いと指定が効く条件を確認します。
animation-durationでできること
活用する場面
同じキーフレームを再生する速さが変わります。 0sや短すぎる値では変化を観察しづらくなります。装飾を長く動かし続けず、必要な時間だけ使います。
animation-durationの書き方と主な値
宣言の基本
.demo {
animation-duration: 1.5s;
}.demo はHTMLの class="demo" を持つ要素を選びます。プロパティ名の後ろにコロン、値の最後にセミコロンを書きます。
指定できる値の読み方
時間。1回のサイクルにかかる長さで、繰り返し回数とは別です。
初期値と継承
- 初期値：
0s。 - 通常の継承：しない。
仕様上の初期値と、ブラウザーの既定スタイルで見えている値は同じとは限りません。たとえば要素に既定のスタイルや別のクラスが適用されていれば、開発者ツールに表示される結果が優先されます。
inherit は親の計算値を使い、initial は仕様の初期値に戻します。unset は継承する項目ならinherit、それ以外ならinitialとして扱います。revert や revert-layer はカスケードの由来やレイヤーを巻き戻す値で、単に直前の行へ戻る指定ではありません。
活用例：animation-durationの変化をブラウザーで比べる
HTMLを用意する
index.html の head に <link rel="stylesheet" href="./styles.css"> を置き、次のHTMLを body 内へ追加します。親と子の構造も例の一部です。
<div class="stage">
<div class="demo">Hello CSS! 内容の意味を保ちながら、文字や余白を整えます。文章を増やして折り返しも確認しましょう。</div>
</div>styles.cssに書くCSS
最後の「今回変更するプロパティ」の行が比較対象です。その前の指定は、違いが見えるようにする土台です。同じ .demo が複数回登場する場合は、通常は後の同じ詳細度の宣言が優先されます。
* { box-sizing: border-box; }
.stage { max-width: 30rem; padding: 1rem; border: 1px dashed #a8baa9; background: #f6f8f1; }
.demo { padding: 1rem; border: 3px solid #285c40; background: #e6f2ce; color: #233a32; }
@keyframes slide-in { from { transform: translateX(0); } to { transform: translateX(1rem); } }
@keyframes fade-in { from { opacity: 0.4; } to { opacity: 1; } }
.demo { animation: slide-in 1s ease 0.3s 1; }
/* 今回変更するプロパティ */
.demo { animation-duration: 1.5s; }
/* 動きを減らす設定では装飾的な動作を止める */
@media (prefers-reduced-motion: reduce) {
.demo { animation: none !important; transition: none !important; transform: none !important; }
}別の値へ変更して比較する
最後の animation-duration の値だけを次のように置き換えます。
.demo { animation-duration: 0.4s; }同じキーフレームを再生する速さが変わります。変更後はファイルを保存してブラウザーを再読み込みします。
動きの比較は、OSやブラウザーで「動きを減らす」が有効な場合には静止するようにしています。アニメーションは再読み込みやサンプルの「適用して比較」ボタンで最初から試せます。トランジションは対象へのホバーやフォーカスで試します。
animation-durationが効かないときの確認
このプロパティで間違えやすい点
0sや短すぎる値では変化を観察しづらくなります。装飾を長く動かし続けず、必要な時間だけ使います。
開発者ツールで順番に調べる
- Networkで
styles.cssが正常に取得されているかを確認する。 - Elementsで対象の
classとCSSのセレクターが一致しているかを確認する。 - Stylesで宣言が無効扱いになっていないか、別の宣言に上書きされていないかを見る。
- Computedで最終的な値を確認し、親の表示方式や寸法も調べる。
- 320px程度の画面幅、文字の拡大、キーボード操作でも内容を利用できるか確認する。
animation-durationのブラウザー互換性
プロパティ本体の対応
2026年9月21日確認のMDN Browser Compatibility Dataの記録です。開始版は通常の接頭辞なしの実装を優先しています。プロパティが使えることと、すべての値・構文が使えることは別です。
- Chrome：43以降
- Edge：12以降
- Firefox：16以降
- Safari：9以降
- Android版Chrome：43以降
- iOS版Safari：9以降
「部分対応」「補足条件あり」の場合は下の出典の注記も確認します。開発版・予定版の記録は、その機能が現在の安定版で使えるという意味ではありません。
練習と関連プロパティ
値を1つずつ変えて理解する
まず 1.5s と 0.4s の違いを言葉で説明します。次に文章量や親の幅だけを変え、結果がどう変わるかを比較してください。複数のプロパティを一度に書き換えるより、原因と結果を追いやすくなります。
関連する記事
animation-nameの使い方animation-iteration-countの使い方transitionの使い方animation-timing-functionの使い方transition-delayの使い方- CSSプロパティ一覧
- CSSセレクターと条件指定
- HTML・CSSの学習順
参考資料
互換性はMDN Browser Compatibility Data 8.1.2、初期値と継承はmdn-data 2.36.0（いずれもCC0-1.0）を参照しています。ブラウザー更新時には対象の値まで含めて再確認してください。