VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00シーエスエス、リファレンス解説です。
0:03今回のテーマは、トランジションです。
0:06ボタンにマウスを乗せたとき、背景色がパッと切り替わるのではなく、じんわりと変わっていく様子をイメージしてください。
0:15トランジションは、ホバーやフォーカスのように要素の状態が変わったときに、
0:20その変化を一瞬ではなく、時間をかけて滑らかに見せるための仕組みです。
0:26対象のプロパティ、変化にかける時間、進み方、遅延という四つの個別の指定を、
0:30一行にまとめて書ける一括指定でもあります。
0:34今回の動画では、この一括指定の読み方から、書き方のコツ、効かないときの確認までを順に整理します。
0:42前回までのアニメーションとの違いも押さえましょう。
0:46アニメーションは、キーフレームで動きを定義して、自動で再生する仕組みでした。
0:53一方トランジションは、自分からは動き出しません。
0:57ホバーした、フォーカスが当たった、クラスが付け替わった、といった状態の変化が起きたときにだけ、
1:03その前後の見た目をつなぐように変化します。
1:08ボタンの色の変化やメニューの開閉など、日常の操作に付いていく滑らかさは、
1:13主にトランジションの担当です。
1:17目的が違うので、使い分けが大切になります。
1:21迷ったら、「自動で動かしたいか、操作への反応として動かしたいか」と自問すると、
1:25判断しやすくなります。
1:29書き方を確認します。
1:31画面の例では、デモというクラスを持つ要素に、背景色と変形の二つを対象として指定しています。
1:39読み方は、対象、時間、進み方というグループが、カンマで二つ並んだ形です。
1:44バックグラウンド・カラー、二百ミリ秒、イーズ、と声に出すと把握しやすくなります。
1:51二百ミリ秒は、〇点二秒のことです。
1:54イーズは、始まりと終わりが緩やかになる進み方の指定です。
1:59対象ごとに時間を変えることもできますし、この例のようにそろえることもできます。
2:05最初はこの一行の例をそのまま写して、時間の数字だけを変えて試してみるのが、
2:09感覚をつかむ近道です。
2:13一括指定で一番間違えやすいのが、時間の読み方です。
2:18一つのグループに時間を二つ書くと、最初が変化にかける時間、次が始まるまでの待ち時間、
2:23と決まっています。
2:28画面の例なら、三百ミリ秒かけて変化し、状態が変わってから百ミリ秒待って始まる、
2:32という意味です。
2:37対象や進み方は順不同でも読み取られますが、時間だけは位置で判断されるので、
2:42順番を意識してください。
2:47遅延を詳しく扱う記事は次に用意されています。
2:51まずは「時間は最初が本体、次が待ち」という決まりを覚えましょう。
2:57対象の書き方には注意点があります。
3:00オールと書くと、変化するすべてのプロパティが対象になります。
3:04手軽に見えますが、幅や高さなど、滑らかにしたくない変化まで付いてきて、思わぬ見た目になることがあります。
3:12記事でも、「何でもオールにせず対象を絞る」ことが大事な考え方として示されています。
3:18基本は、バックグラウンド・カラーやトランスフォームのように、変わってほしいプロパティの名前を一つずつ列挙することです。
3:27対象が明確だと、後から読んでも意図が伝わり、調整もしやすくなります。
3:32もちろん、すべての変化を滑らかにしたいと意図する場面では、オールを判断して使うこともできます。
3:40トランジションを指定する場所もポイントです。
3:43変化後の見た目は、ホバーのような状態側のルールに書きますが、トランジション自体は、
3:47通常状態のルールに書くのが基本です。
3:52通常状態に書いておけば、マウスが乗って変化するときも、離れて元に戻るときも、
3:56両方で滑らかに変化します。
4:00逆にホバー側にだけ書くと、乗せたときは滑らかでも、離した瞬間に指定が外れてパッと戻ってしまいます。
4:07往復の両方で効かせたいなら、置き場所は通常状態、と覚えてください。
4:13これはホバーに限らず、フォーカスや、クラスで状態が変わる場合でも同じ考え方です。
4:19記事の活用例を、まとめた形で見てみましょう。
4:22ボタンには通常状態で薄い緑の背景と、変化の対象を指定しています。
4:28ホバー、またはキーボードのフォーカスが当たると、背景がオレンジ寄りの色になり、
4:32少しだけ上へ移動します。
4:36このときトランジションが働いて、二百ミリ秒かけて色と位置が少しずつ変わります。
4:42注目してほしいのは、変化のきっかけと見た目は状態側に、変化の滑らかさは通常状態に分かれている点です。
4:51役割分担が分かると、コードが読みやすくなります。
4:55手元のブラウザーでマウスを乗せたり離したりして、実際の変化の速さも体感してみてください。
5:02一括指定には、もう一つ大事な性質があります。
5:05トランジションとしてまとめて書いたとき、書かなかった関連の値は、初期値に戻ります。
5:11たとえば後から別のルールで一括指定を書き直すと、以前そろえた時間が消えて、
5:16変化が一瞬で終わる、といったことが起こります。
5:20一部だけ変えたいときは、画面のように個別プロパティで足すのが安全です。
5:25また、このプロパティは継承しません。
5:28親に書いても子には効かないので、対象の要素自身に指定してください。
5:33変化を止めたいときの値が、ノーンです。
5:36ノーンを指定すると、トランジションは働かず、見た目は即座に切り替わります。
5:42比較の練習にも使えますし、動きが不要な場面の指定としても有効です。
5:47もう一つ、利用者への配慮も紹介します。
5:50端末やブラウザーには「動きを減らす」という設定があり、その設定が有効な人には、
5:55装飾的な動きを止める書き方が推奨されます。
6:00画面のようにメディアクエリで囲み、ノーンで止めるのが、記事で使われている方法です。
6:07すべての人に快適な動きを考えることも、大切な設計の一部です。
6:12動きを止める指定は、利用者の設定を尊重するためのもので、使い勝手を損なうものではありません。
6:20効かないときは、順番に確認しましょう。
6:22まず大前提として、トランジションは変化が起きて初めて働きます。
6:26ホバーしても対象プロパティの値が変わっていなければ、滑らかになる以前に変化自体がありません。
6:32次に、指定の置き場所です。
6:34状態側にだけ書いていないか、より後のルールに一括指定で上書きされ、時間が初期値に戻っていないかを確認します。
6:41最後に開発者ツールで、スタイルズに無効な宣言がないか、コンピューテッドで最終的な値がどうなっているかを見ると、
6:45原因を切り分けられます。
6:50それでも直らない場合は、スタイルシート自体が読み込まれているかも、改めて確認してみましょう。
6:56ブラウザー互換性は良好で、クローム、ファイアフォックス、サファリ、エッジのいずれも、
7:01かなり前のバージョンから接頭辞なしで使えます。
7:05安心して基本の書き方に集中できるプロパティです。
7:09練習としては、記事の例で二百ミリ秒の指定とノーンを見比べ、違いを自分の言葉で説明してみてください。
7:16値を一度に書き換えず、一つずつ変えて比べると、原因と結果が追いやすくなります。
7:22次回は、変化が始まるまでの待ち時間を決める、トランジション・ディレイを取り上げます。
7:28お疲れさまでした。
7:29個別のプロパティは今後一つずつ取り上げるので、この一括指定の形には先に見慣れておいてください。

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

この動画で学べること

transitionの役割と主な指定値を解説。色と移動が滑らかに変わるか、すぐ切り替わるかを比較します。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

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