VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、トランジション・ディレイです。
0:06前回は、変化を滑らかにするトランジションの一括指定を学びました。
0:11今回はその仲間で、「変化が始まるまでの待ち時間」を決める個別プロパティを取り上げます。
0:17マウスを乗せても、色が変わり始めるのが少しだけ遅れる、そんな様子を思い浮かべてください。
0:23なぜわざわざ遅らせるのか、どう書けばよいのか、効かないときはどこを見るのか。
0:29順番に整理していきましょう。
0:31前回のトランジションの考え方が土台になるので、不安な方は先にそちらを振り返っておくと、
0:35理解がスムーズです。
0:39まず、全体の中での位置づけを確認します。
0:42トランジションには、対象を決めるプロパティ、変化にかける時間を決めるデュレーション、
0:47進み方を決めるタイミング・ファンクション、そして今回の遅延を決めるディレイという、
0:52四つの個別の指定があります。
0:57一括指定で時間を二つ書くと、一つ目が変化にかける時間、二つ目が遅延になる決まりでした。
1:04画面の例では、四百ミリ秒かけて変化し、始まるまで三百ミリ秒待つ、という意味です。
1:11遅延だけを後から変えたいときは、この個別プロパティで指定するのが確実です。
1:17書き方を見てみましょう。
1:18セレクターで要素を選び、トランジション・ディレイに時間を指定するだけです。
1:24単位は、ミリ秒を表すエムエスか、秒を表すエスのどちらかを使います。
1:29三百ミリ秒は、〇点三秒のことです。
1:32記事の比較例でも、この三百ミリ秒という値が基準になっています。
1:36大切なのは、この指定だけでは変化が滑らかにはならない点です。
1:41ディレイはあくまで開始のタイミングをずらす役割で、滑らかな変化そのものは、
1:46トランジション本体の指定があって初めて生まれます。
1:50本体とセットで書くことを意識してください。
1:54秒単位で書くなら、ゼロ点三エスという小数表記も使えます。
1:58値の読み方を整理します。
2:00正の値を書くと、ホバーなどの状態変化が起きてから、指定した時間だけ待って変化が始まります。
2:07反対に負の値を書くと、変化が途中まで進んだ状態から始まったように扱われます。
2:13たとえば変化全体が四百ミリ秒で遅延がマイナス百ミリ秒なら、最初の百ミリ秒分を飛ばして、
2:18残り三百ミリ秒の部分から始まる計算です。
2:23仕様上の初期値はゼロ秒、つまり待ち時間なしです。
2:27また、このプロパティは継承しません。
2:30親に書いても子には効かないので、対象の要素自身に指定してください。
2:35意外な落とし穴が、戻るときの動きです。
2:39通常状態のルールにディレイを書くと、その待ち時間は、ホバーして変化するときだけでなく、
2:44マウスを離して元に戻るときにも同じように付きます。
2:49ホバーを外したのに一拍遅れて戻り始めると、利用者は操作がもたついているように感じるかもしれません。
2:57記事でも、クリックやフォーカスの反応まで遅らせると操作しづらくなる、と注意されています。
3:04遅延を入れるときは、行きの動きだけでなく、帰りの動きも含めて確認することが大切です。
3:11なお、状態側のルールにだけ書いた場合は、戻るときには遅延が付かないという違いも生まれます。
3:19記事の活用例を、まとめた形で見てみましょう。
3:22薄い緑色のボタンが用意され、背景色と位置の変化に、四百ミリ秒のトランジションが指定されています。
3:30ホバー、またはキーボードのフォーカスが当たると、背景がオレンジ寄りの色になり、
3:34ボタンが少し上へ移動します。
3:38そこへ最後の行、トランジション・ディレイ三百ミリ秒が加わるのが、今回のポイントです。
3:45状態が変わってから三百ミリ秒の間は見た目がそのままで、その後に四百ミリ秒かけて変化が進みます。
3:52時間の流れを分けて読むと、コードの意味がつかみやすくなります。
3:57この例では、背景色と位置の両方に、同じ三百ミリ秒の遅延がまとめて効いています。
4:03違いを確かめるには、記事の比較方法が手軽です。
4:06最後のディレイの行だけを、ゼロ秒に書き替えてみてください。
4:10ホバーした瞬間に変化が始まるようになり、三百ミリ秒のときの、ワンテンポ遅れる感じとの差がはっきりします。
4:16記事の練習でも勧められているように、まずはこの二つの違いを、自分の言葉で説明してみましょう。
4:22複数の値を一度に書き換えず、一つずつ変えて比べることが、原因と結果を追うコツです。
4:27書き替えたらファイルを保存して、ブラウザーを再読み込みする流れも忘れずに。
4:32応用として、対象ごとに違う遅延も設定できます。
4:36値をカンマで区切って並べると、トランジション・プロパティで指定した対象の並び順に、
4:40それぞれ対応します。
4:43画面の例では、背景色は待ち時間なしで、位置の変化は百五十ミリ秒遅れて始まります。
4:49複数の対象に時間差を付けると、順番に動き出すような演出が作れます。
4:54ただし、数が増えるほど対応関係が読み取りにくくなるので、並び順をそろえて書くことと、
4:59意図が伝わる最小限の指定にとどめることが大切です。
5:05値の数が対象より少ない場合は、先頭から繰り返して対応付けられる決まりになっています。
5:11使いどころを考えましょう。
5:13ディレイが生きるのは、カードを順番に出現させたい、といった意図のある演出です。
5:19逆に、クリックやフォーカスへの反応を遅らせるのは避けたいところです。
5:24反応が遅いと、利用者は効いていないのかと不安になり、操作しづらくなります。
5:29記事も、遅延が必要な理由を決めてから指定するよう勧めています。
5:34あわせて、端末の「動きを減らす」設定が有効な人には、メディアクエリでトランジション自体を止める配慮も、
5:38記事の例に含まれています。
5:43効かないときの確認です。
5:44ディレイで多い勘違いは、本体が無いケースです。
5:47トランジションの対象や、変化にかける時間が指定されていなければ、遅らせたくても、
5:50そもそも滑らかな変化が起きません。
5:54まず本体があるかを見てください。
5:56次に、開発者ツールでの切り分けです。
5:58ネットワークでスタイルシートが読み込まれているか、エレメンツでクラスとセレクターが一致しているか、
6:02スタイルズで宣言が打ち消されていないか、コンピューテッドで最終的な値がどうなっているか、
6:06の順に確認します。
6:10小さい画面幅やキーボード操作で使えるかの確認も、記事の観点として挙げられています。
6:15ブラウザー互換性は良好で、クローム、エッジ、ファイアフォックス、サファリのいずれも、
6:19かなり前のバージョンから接頭辞なしで使えます。
6:24安心して基本の使い方に集中できるプロパティです。
6:28まとめると、トランジション・ディレイは、変化が始まるまでの待ち時間です。
6:33初期値はゼロ秒で、継承はしません。
6:35練習として、記事の例で三百ミリ秒とゼロ秒を見比べ、違いを言葉で説明してみてください。
6:41次回は、変化の進み方を決める、トランジション・タイミング・ファンクションを取り上げます。
6:48お疲れさまでした。
6:49時間の指定は短すぎると効果が分かりにくいので、最初は三百ミリ秒前後で試すと、
6:53違いが見えやすくなります。

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

この動画で学べること

transition-delayの役割と主な指定値を解説。操作後に少し待って変化するか、すぐ始まるかが変わります。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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