VIDEO LESSON

CSSのanimation-durationの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:47動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、アニメーション・デュレーションです。
0:07このプロパティが決めるのは、アニメーションの一回分を「何秒かけて再生するか」です。
0:13これまでのアニメーション関連の指定を思い出すと、動きの種類はネーム、始まるまでの待ち時間はディレイ、
0:20進み方はタイミング・ファンクション、繰り返しの回数はイテレーション・カウントが担当していました。
0:27今回はそこに「一回分の長さ」が加わります。
0:30同じ動きでも、一秒で終わるのか、三秒かけてゆっくり見せるのかで、印象はまったく変わります。
0:36その速さを調整するツマミがデュレーションです。
0:39まず言葉の意味を押さえましょう。
0:42デュレーションが表すのは、アニメーションの一つのサイクル、つまりキーフレームを最初から最後まで一通り再生するのにかかる時間です。
0:52動画全体の長さそのものではありません。
0:55たとえば一回が一・五秒の動きを二回繰り返せば、再生にかかる時間はおよそ三秒になります。
1:01開始までの待ち時間であるディレイは、さらにその前に一度だけ加わります。
1:07逆に、デュレーションがゼロ秒のままだと、動きは一瞬で完了してしまい、目ではほとんど確認できません。
1:15何回繰り返しても同じです。
1:17全体の時間を考えるときは、「一回分の長さ掛ける回数」という掛け算で捉えると分かりやすくなります。
1:24書き方を確認します。
1:26対象の要素を選ぶセレクター、中括弧、プロパティ名、コロン、値、セミコロンの順に書きます。
1:32画面の例では、デモというクラスを持つ要素に、一回分の再生時間として一・五秒を指定しています。
1:39ここで大事なのは、値には必ず単位を付けることです。
1:43秒ならエス、一ミリ秒単位で細かく指定したいならエムエスと書きます。
1:48単位のない数字だけでは時間として解釈されず、その宣言は無効になります。
1:54前回学んだ回数の指定とは違い、数字だけで済ませられない点がこのプロパティの特徴です。
2:00コロンやセミコロンを落とした場合も、その宣言だけが効かなくなるので注意しましょう。
2:07値の読み方を見ていきましょう。
2:09秒単位のエスでは、一・五秒のように小数も書けます。
2:13ミリ秒単位のエムエスは、一秒を千に分けた細かい単位で、千五百エムエスと一・五エスはまったく同じ長さです。
2:22使い分けの目安として、ボタンの反応のような細かい動きはミリ秒で、ゆっくり見せたい装飾の動きは秒で書くと、
2:28意図が読み取りやすくなります。
2:34このあとの実例では、一・五秒と〇・四秒を比べます。
2:38〇・四秒は一秒の半分にも満たない長さなので、動きはかなり素早く感じられるはずです。
2:45まずはこの二つの数字の差を、頭の中でイメージしておいてください。
2:51ひとつの要素に複数のアニメーションを付ける場合は、デュレーションもカンマ区切りで複数書けます。
2:58値の順番は、アニメーション・ネームに書いたキーフレームの順番と対応します。
3:03たとえば、スライドインとフェードインの二つを付けた要素なら、最初の時間はスライドイン用、
3:08次の時間はフェードイン用です。
3:12この例では、移動には一・五秒、透明度の変化には〇・四秒を指定しています。
3:17もし時間の数がアニメーションより少ない場合は、足りない分は先頭の値から繰り返して補われます。
3:24逆に余った値は使われません。
3:26複数の動きを重ねるときは、この「順番で対応する」という決まりを覚えておきましょう。
3:33一括指定のアニメーションとの関係も確認しておきましょう。
3:37一括指定の中には、時間を表す値が最大で二つ現れます。
3:41このとき、最初に出てきた時間がデュレーション、二番目に出てきた時間がディレイとして扱われます。
3:48画面の例では、一秒が再生時間、〇・三秒が開始までの待ち時間です。
3:54ここを逆に覚えてしまうと、「ゆっくり動かすつもりが、始まるのが遅くなった」という勘違いが起こります。
4:01また、一括指定は関係する個別プロパティをまとめて初期化する働きがあります。
4:07そのため、デュレーションだけを変更したい個別の指定は、一括指定より後ろに書くのが鉄則です。
4:14順番については、実例でもう一度確認します。
4:18実例で流れを確認しましょう。
4:20土台はこれまでと同じ、箱が右へ一レム移動するスライドインというキーフレームです。
4:25真ん中の指定では、この動きを一秒かけて、〇・三秒の遅延のあと、一回だけ再生するよう設定しています。
4:32そして最後の行で、再生時間を一・五秒に上書きしています。
4:36その結果、〇・三秒待ったあと、箱は一・五秒かけてゆっくり右へ移動します。
4:40一括指定の中の一秒よりも、直後の個別指定が優先されている点に注目してください。
4:46記事のサンプルはページの再読み込みで最初から試せますので、まずこのゆったりした動きを目で追ってみてください。
4:53ファイルを保存して、ブラウザーを再読み込みするところから始めましょう。
4:58では最後の値だけを〇・四秒に置き換えてみます。
5:02キーフレームの内容は同じで、移動する距離も同じです。
5:06違うのは、そこへ到達するまでの時間だけです。
5:09一・五秒のときと比べると、〇・四秒では箱が素早く移動し、あっという間に終わります。
5:15遅延の〇・三秒のあとに始まる点は変わりません。
5:19このように、動きの中身を変えずに速さだけを調整できるのが、デュレーションの役割です。
5:26ファイルを保存してブラウザーを再読み込みし、二つの速さを見比べてみてください。
5:32目的に対して速すぎないか、遅すぎないか、といった感覚をつかむことが、この指定を使いこなす第一歩です。
5:40時間の選び方の注意点です。
5:42まず、ゼロ秒や極端に短い値では、変化が起きていても目で追うことが難しくなります。
5:47「効いていないのではないか」と誤解する原因にもなります。
5:52逆に、装飾の動きを長くしすぎると、読み手はその間ずっと動きを視界に入れ続けることになり、
5:55負担になります。
5:59大切なのは、動きの目的に合った、必要十分な長さを選ぶことです。
6:04さらに、利用者の環境で「動きを減らす」設定が有効な場合に備えて、記事の例のようにメディアクエリで装飾的な動作を止める対応も用意しておきましょう。
6:15速さは、見た目の派手さではなく、伝わりやすさで決めるのが基本です。
6:20効かないときの確認です。
6:21まず前提として、キーフレームの名前が指定されていなければ、時間を決めても動く対象が存在しません。
6:29次に、値の単位を確認します。
6:31エスやエムエスを付け忘れた宣言は無効です。
6:34そして、初期値のゼロ秒のままになっていないかも見ましょう。
6:38ゼロ秒の再生は、見た目には「何も起きない」ことと区別がつきません。
6:43書く順番も重要です。
6:45デュレーションの個別指定より後ろに一括指定があると、時間は一括指定の値で上書きされます。
6:52開発者ツールでは、スタイルズで宣言に取り消し線が付いていないかを確認し、
6:56コンピューテッドで最終的な値を見ます。
7:00合わせて、スタイルシート自体が読み込まれているかも、ネットワークの欄で確かめましょう。
7:06最後に基本情報をまとめます。
7:08初期値はゼロ秒、継承はしません。
7:11ブラウザーの対応も広く、クロームは四三以降、エッジは一二以降、ファイアフォックスは一六以降、
7:15サファリは九以降で使えます。
7:20練習として、一・五秒と〇・四秒の違いを、実際に切り替えて見比べ、どちらがどんな場面に向いているかを言葉で説明してみてください。
7:29デュレーションは単純な指定ですが、動きの心地よさを左右する大事なツマミです。
7:35次回は、どのキーフレームを再生するかを決める、アニメーション・ネームを取り上げます。
7:41これでアニメーションの時間まわりの指定は、ひととおり押さえられました。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

animation-durationの役割と主な指定値を解説。同じキーフレームを再生する速さが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのanimation-durationの使い方：指定値・実例・効かない原因とブラウザー互換性 →