SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

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

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

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、トランジション・プロパティです。
  4. 0:07前回は、変化にかける時間、デュレーションを取り上げました。
  5. 0:11今回はその土台になる、「どのプロパティを変化の対象にするか」を決める指定です。
  6. 0:17ボタンの色と位置が一緒にゆっくり変わるのか、色だけが変わって位置はパッと切り替わるのか。
  7. 0:23その分かれ道を決めるのが、このプロパティです。
  8. 0:26対象の決め方が分かると、これまでの一括指定のコードも読み解きやすくなります。
  9. 0:32順番に見ていきましょう。
  10. 0:34位置づけを確認します。
  11. 0:35トランジションには、対象を決めるプロパティ、時間を決めるデュレーション、
  12. 0:42進み方を決めるタイミング・ファンクション、待ち時間を決めるディレイの四つの担当がありました。
  13. 0:48今回のプロパティは、その筆頭、「対象」の担当です。
  14. 0:52一括指定のトランジションでは、それぞれのまとまりの最初に書いたプロパティ名が、
  15. 0:56この担当分にあたります。
  16. 1:00対象を増やしたり減らしたりしたいときは、この部分を書き換えるのが確実です。
  17. 1:05時間や進み方は、対象が決まってはじめて意味を持つ、という順番も意識しておきましょう。
  18. 1:12書き方を見てみましょう。
  19. 1:13セレクターで要素を選び、トランジション・プロパティに、対象にしたいプロパティの名前を書きます。
  20. 1:20背景色と位置の両方を対象にしたいなら、背景色を表すバックグラウンド・カラーと、
  21. 1:24移動を表すトランスフォームを、カンマで区切って並べます。
  22. 1:29書くのは、色や大きさのような値ではなく、変化させたいプロパティの名前そのものです。
  23. 1:35このあとの例でも、この二つを対象にした状態から始めます。
  24. 1:39名前の代わりに書ける、特別な値も確認します。
  25. 1:42オールは、値が変わるすべてのプロパティを対象にする指定です。
  26. 1:46ナンは、どのプロパティも対象にしません。
  27. 1:48オールは手軽ですが、注意点もあります。
  28. 1:51自分では変えるつもりのなかったプロパティまで、いつの間にか滑らかに動き始めてしまうことがあるのです。
  29. 1:57特に、レイアウトに関わるプロパティが意図せず動くと、表示が崩れて見える原因にもなります。
  30. 2:03そのため記事では、対象を名前で絞って書くことを勧めています。
  31. 2:07まずは対象を明示する書き方に慣れていきましょう。
  32. 2:10初期値と継承を確認します。
  33. 2:12このプロパティの初期値はオールです。
  34. 2:15つまり、何も書かなくても、すべてのプロパティが変化の対象になっています。
  35. 2:20時間を決めるデュレーションさえ指定すれば、対象を書かなくても変化が滑らかに見えるのは、
  36. 2:24この初期値のおかげです。
  37. 2:29ただし継承はしません。
  38. 2:30親の要素に書いても、子の要素には効きません。
  39. 2:33対象をはっきり決めたいときは、変化させたい要素自身に、名前を書いて指定してください。
  40. 2:40記事の活用例を見てみましょう。
  41. 2:42薄い緑色のボタンが用意され、背景色と位置の変化に、四百ミリ秒のトランジションが指定されています。
  42. 2:50ホバー、またはキーボードのフォーカスが当たると、背景がオレンジ寄りの色になり、
  43. 2:55ボタンが少し上へ移動します。
  44. 2:59注目は最後の行、トランジション・プロパティです。
  45. 3:03対象として、背景色と位置の二つが並んでいます。
  46. 3:07この指定があるため、色の変化も、位置の変化も、両方とも四百ミリ秒かけて滑らかに進みます。
  47. 3:14ボタンの見た目の土台は上の行で作られ、変化のルールは下の行で決まる、という読み分けもポイントです。
  48. 3:23違いを確かめるには、最後の行の値を、背景色だけに置き換えます。
  49. 3:27変えるのは対象の一覧だけです。
  50. 3:30すると、背景色はこれまで通り、四百ミリ秒かけてゆっくり変わります。
  51. 3:34一方、対象から外れた位置の変化は、時間をかける相手がいなくなるため、その場でパッと切り替わります。
  52. 3:42同じホバー操作でも、動くものと動かないものが分かれるわけです。
  53. 3:46対象に挙げるかどうかが、そのまま「滑らかに変えるかどうか」の分かれ道になります。
  54. 3:52このプロパティが効くための条件を整理します。
  55. 3:55一つ目は、対象に挙げたプロパティの値が、ホバーやフォーカスなどで実際に変わることです。
  56. 4:01値が変わらなければ、変化そのものが始まりません。
  57. 4:05二つ目は、変化にかける時間、デュレーションが、ゼロより大きいことです。
  58. 4:10時間がゼロでは、対象に挙げていても即座に切り替わってしまいます。
  59. 4:14逆に、対象に挙げていないプロパティは、時間を長くしても滑らかにはなりません。
  60. 4:20対象と時間は、セットでそろえるものと覚えてください。
  61. 4:23配慮の指定も確認します。
  62. 4:25記事の例には、端末で「動きを減らす」設定が有効なとき、トランジション自体を止めるメディアクエリが含まれています。
  63. 4:33対象をいくら丁寧に選んでも、動きそのものが負担になる人がいるためです。
  64. 4:38対象や時間を調整できるからこそ、止めるという選択肢も、セットで用意しておきましょう。
  65. 4:44あわせて、ホバーだけでなく、キーボードのフォーカスが当たったときにも同じ変化が起きるかを、
  66. 4:48忘れずに確認してください。
  67. 4:53効かないときの確認です。
  68. 4:55まず、対象に挙げたプロパティの値が、操作に合わせて本当に変わっているかを見てください。
  69. 5:02次に、時間、デュレーションがゼロになっていないかを確認します。
  70. 5:07逆に、オールで対象を広げすぎて、意図しない要素まで動いているケースも、ここで見つけられます。
  71. 5:14開発者ツールでは、スタイルズで宣言が打ち消されていないか、コンピューテッドで最終的な対象の一覧を確認する順番が有効です。
  72. 5:24セレクターとクラスが一致しているかも、あわせて見直しましょう。
  73. 5:29ブラウザー互換性は良好です。
  74. 5:31プロパティ自体は、クローム、エッジ、ファイアフォックス、サファリのいずれも、
  75. 5:36かなり前のバージョンから接頭辞なしで使えます。
  76. 5:40まとめると、トランジション・プロパティは、滑らかに変える対象を選ぶ指定です。
  77. 5:46初期値はオール、継承はしません。
  78. 5:48練習として、背景色と位置の両方を対象にした場合と、背景色だけにした場合の違いを、
  79. 5:52自分の言葉で説明してみてください。
  80. 5:56次回は、回転や移動の基準点を決める、トランスフォーム・オリジンを取り上げます。
  81. 6:02お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

transition-propertyの役割と主な指定値を解説。ホバーやフォーカスで色と位置の両方を動かすか、色だけを動かすかを比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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