SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

再生時間 6:37動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、トランジション・デュレーションです。
  4. 0:07前回は、変化の進み方、タイミング・ファンクションを取り上げました。
  5. 0:12今回はその隣の担当、変化にかける時間そのものを決めるプロパティです。
  6. 0:17同じボタンが少し上へ動く変化でも、六百ミリ秒かけてゆっくり終わるのか、百五十ミリ秒で素早く終わるのかで、
  7. 0:22操作したときの感触は大きく変わります。
  8. 0:28その時間を決める指定を、順番に見ていきましょう。
  9. 0:31位置づけを確認します。
  10. 0:33トランジションには、対象を決めるプロパティ、変化にかける時間を決めるデュレーション、
  11. 0:39進み方を決めるタイミング・ファンクション、始まるまでの待ち時間を決めるディレイの四つがありました。
  12. 0:46今回のデュレーションは、そのうち「時間」の担当です。
  13. 0:50一括指定の書き方では、最初に書いた時間がデュレーション、二番目に書いた時間がディレイになる決まりでしたね。
  14. 0:57進み方だけを変えたいときはタイミング・ファンクション、時間だけを変えたいときは、
  15. 1:02このデュレーションを書き換えるのが確実です。
  16. 1:06書き方を見てみましょう。
  17. 1:08セレクターで要素を選び、トランジション・デュレーションに、時間を指定するだけです。
  18. 1:15仕様上の初期値はゼロ秒、つまり何も書かなければ時間はゼロで、変化はアニメーションにならず、
  19. 1:19その場でパッと切り替わります。
  20. 1:24裏を返せば、滑らかな変化が見えているなら、どこかで時間が指定されているということです。
  21. 1:30また、このプロパティは継承しません。
  22. 1:33親に書いても子には効かないので、変化させたい要素自身に指定してください。
  23. 1:39この後の例では、まず六百ミリ秒を指定するところから始めます。
  24. 1:43時間の書き方を確認します。
  25. 1:45単位は二つ、秒を表すエスと、ミリ秒を表すエムエスです。
  26. 1:50一秒は千ミリ秒なので、ゼロ点六秒と六百ミリ秒は、まったく同じ長さを表します。
  27. 1:56短い時間は、百五十ミリ秒のようにミリ秒で書くほうが読みやすく、間違えにくいでしょう。
  28. 2:03ここで大事な注意が一つあります。
  29. 2:05時間はゼロ以上でなければならない決まりで、マイナスの値を書くと、宣言そのものが無効になります。
  30. 2:13単位を付け忘れた、ただの数字も無効です。
  31. 2:16時間を指定するときは、数字と単位が一セットだと思ってください。
  32. 2:21対象が複数のときの指定です。
  33. 2:23トランジションの対象が、背景色と位置の二つある場合、時間もカンマで区切って二つ書けます。
  34. 2:31一つ目の時間が一つ目の対象、二つ目の時間が二つ目の対象、というように、並び順で対応します。
  35. 2:38たとえば、背景色は六百ミリ秒かけてゆっくり、位置は百五十ミリ秒で素早く、
  36. 2:44といった具合に、対象ごとに時間を分けることができます。
  37. 2:49逆に、時間を一つだけ書いた場合は、すべての対象に、その同じ時間が使われます。
  38. 2:55進み方や待ち時間でも同じ考え方が使えるので、この対応の仕組みはまとめて押さえておきましょう。
  39. 3:03記事の活用例を見てみましょう。
  40. 3:06薄い緑色のボタンが用意され、背景色と位置の変化に、四百ミリ秒のトランジションが指定されています。
  41. 3:14ホバー、またはキーボードのフォーカスが当たると、背景がオレンジ寄りの色になり、
  42. 3:18ボタンが少し上へ移動します。
  43. 3:23注目は最後の行、トランジション・デュレーション、六百ミリ秒です。
  44. 3:28上の行で四百ミリ秒と書かれていた所要時間が、この行で六百ミリ秒に上書きされ、
  45. 3:34背景色も位置も、ゆっくり変化するようになります。
  46. 3:39どの行が最終的な時間を決めているのか、意識しながら読んでみてください。
  47. 3:45違いを確かめるには、最後の行の値だけを、百五十ミリ秒に置き換えます。
  48. 3:50変えるのは時間だけです。
  49. 3:51変化の対象も、移動する距離も、進み方も、すべて同じにそろえます。
  50. 3:56六百ミリ秒では、ホバーすると色と位置が、ゆっくりと時間をかけて変わっていく様子が見えました。
  51. 4:02百五十ミリ秒では、同じ変化がパッと素早く終わり、キビキビした印象になります。
  52. 4:08記事の比較も、この一か所だけを変える方法で行われています。
  53. 4:12複数の指定を一度に変えないことが、違いを正しく確かめるコツです。
  54. 4:16では、時間はどのくらいがよいのでしょうか。
  55. 4:20記事が挙げる注意点は、長すぎると操作への反応が遅く感じられることです。
  56. 4:25ボタンを押したのに、動きが終わるまで待たされるような感覚は、ストレスにつながります。
  57. 4:32決め方の目安は、変化の移動距離と、その要素の役割に合わせることです。
  58. 4:38ボタンやメニューのような、操作を助けるための補助的な動きは、短めの時間に収めるのが定石です。
  59. 4:45逆に、あえてゆっくり見せたい演出の場面では、長めの時間も選べます。
  60. 4:51まず短い値から試して、操作の邪魔にならない範囲で調整していきましょう。
  61. 4:57配慮の指定も確認します。
  62. 4:59記事の例には、端末で「動きを減らす」設定が有効なとき、トランジション自体を止めるメディアクエリが含まれています。
  63. 5:08動きに敏感な人にとっては、たとえゆっくりした変化であっても、負担になる場合があるためです。
  64. 5:15時間を調整できるからこそ、止めるという選択肢も、セットで用意しておきましょう。
  65. 5:21あわせて、トランジションはホバーだけで試して終わりにせず、キーボードのフォーカスが当たったときにも、
  66. 5:27同じ変化が起きるかを確認することが大切です。
  67. 5:33効かないときの確認です。
  68. 5:35まず前提として、トランジションの対象があり、ホバーなどで実際に値が変化しているかを見てください。
  69. 5:42時間が正しく指定されていても、変化自体がなければ、何も起きません。
  70. 5:47次に、時間の書き方です。
  71. 5:49単位を落としたり、マイナスを書いたりすると、宣言が無効として、丸ごと無視されます。
  72. 5:55開発者ツールでは、スタイルズで宣言が打ち消されていないか、コンピューテッドで最終的なデュレーションの値を確認する順番が有効です。
  73. 6:05スタイルシート自体が読み込まれているかの確認も、忘れずにどうぞ。
  74. 6:10ブラウザー互換性は良好です。
  75. 6:11プロパティ自体は、クローム、エッジ、ファイアフォックス、サファリのいずれも、
  76. 6:15かなり前のバージョンから接頭辞なしで使えます。
  77. 6:18まとめると、トランジション・デュレーションは、変化が始まってから終わるまでの時間、
  78. 6:22そのものを決める指定です。
  79. 6:25初期値はゼロ秒、継承はしません。
  80. 6:27練習として、六百ミリ秒と百五十ミリ秒の違いを、自分の言葉で説明してみてください。
  81. 6:32次回は、変化の対象を決める、トランジション・プロパティを取り上げます。
  82. 6:36お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

transition-durationの役割と主な指定値を解説。同じ変化がゆっくり完了するか素早く完了するかを比べます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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