WEBVTT

1
00:00:00.000 --> 00:00:00.925
こんにちは。

2
00:00:00.925 --> 00:00:03.699
シーエスエス、リファレンス解説です。

3
00:00:03.699 --> 00:00:06.474
今回のテーマは、トランジションです。

4
00:00:06.474 --> 00:00:15.260
ボタンにマウスを乗せたとき、背景色がパッと切り替わるのではなく、じんわりと変わっていく様子をイメージしてください。

5
00:00:15.260 --> 00:00:20.655
トランジションは、ホバーやフォーカスのように要素の状態が変わったときに、

6
00:00:20.655 --> 00:00:26.049
その変化を一瞬ではなく、時間をかけて滑らかに見せるための仕組みです。

7
00:00:26.049 --> 00:00:30.519
対象のプロパティ、変化にかける時間、進み方、遅延という四つの個別の指定を、

8
00:00:30.519 --> 00:00:34.989
一行にまとめて書ける一括指定でもあります。

9
00:00:34.989 --> 00:00:42.388
今回の動画では、この一括指定の読み方から、書き方のコツ、効かないときの確認までを順に整理します。

10
00:00:42.388 --> 00:00:46.679
前回までのアニメーションとの違いも押さえましょう。

11
00:00:46.679 --> 00:00:53.202
アニメーションは、キーフレームで動きを定義して、自動で再生する仕組みでした。

12
00:00:53.202 --> 00:00:57.322
一方トランジションは、自分からは動き出しません。

13
00:00:57.322 --> 00:01:03.158
ホバーした、フォーカスが当たった、クラスが付け替わった、といった状態の変化が起きたときにだけ、

14
00:01:03.158 --> 00:01:08.994
その前後の見た目をつなぐように変化します。

15
00:01:08.994 --> 00:01:13.371
ボタンの色の変化やメニューの開閉など、日常の操作に付いていく滑らかさは、

16
00:01:13.371 --> 00:01:17.749
主にトランジションの担当です。

17
00:01:17.749 --> 00:01:21.353
目的が違うので、使い分けが大切になります。

18
00:01:21.353 --> 00:01:25.645
迷ったら、「自動で動かしたいか、操作への反応として動かしたいか」と自問すると、

19
00:01:25.645 --> 00:01:29.936
判断しやすくなります。

20
00:01:29.936 --> 00:01:31.590
書き方を確認します。

21
00:01:31.590 --> 00:01:39.031
画面の例では、デモというクラスを持つ要素に、背景色と変形の二つを対象として指定しています。

22
00:01:39.031 --> 00:01:44.985
読み方は、対象、時間、進み方というグループが、カンマで二つ並んだ形です。

23
00:01:44.985 --> 00:01:51.599
バックグラウンド・カラー、二百ミリ秒、イーズ、と声に出すと把握しやすくなります。

24
00:01:51.599 --> 00:01:54.411
二百ミリ秒は、〇点二秒のことです。

25
00:01:54.411 --> 00:01:59.041
イーズは、始まりと終わりが緩やかになる進み方の指定です。

26
00:01:59.041 --> 00:02:05.490
対象ごとに時間を変えることもできますし、この例のようにそろえることもできます。

27
00:02:05.490 --> 00:02:09.459
最初はこの一行の例をそのまま写して、時間の数字だけを変えて試してみるのが、

28
00:02:09.459 --> 00:02:13.428
感覚をつかむ近道です。

29
00:02:13.428 --> 00:02:18.311
一括指定で一番間違えやすいのが、時間の読み方です。

30
00:02:18.311 --> 00:02:23.291
一つのグループに時間を二つ書くと、最初が変化にかける時間、次が始まるまでの待ち時間、

31
00:02:23.291 --> 00:02:28.272
と決まっています。

32
00:02:28.272 --> 00:02:32.861
画面の例なら、三百ミリ秒かけて変化し、状態が変わってから百ミリ秒待って始まる、

33
00:02:32.861 --> 00:02:37.451
という意味です。

34
00:02:37.451 --> 00:02:42.236
対象や進み方は順不同でも読み取られますが、時間だけは位置で判断されるので、

35
00:02:42.236 --> 00:02:47.021
順番を意識してください。

36
00:02:47.021 --> 00:02:51.318
遅延を詳しく扱う記事は次に用意されています。

37
00:02:51.318 --> 00:02:57.568
まずは「時間は最初が本体、次が待ち」という決まりを覚えましょう。

38
00:02:57.568 --> 00:03:00.146
対象の書き方には注意点があります。

39
00:03:00.146 --> 00:03:04.695
オールと書くと、変化するすべてのプロパティが対象になります。

40
00:03:04.695 --> 00:03:12.581
手軽に見えますが、幅や高さなど、滑らかにしたくない変化まで付いてきて、思わぬ見た目になることがあります。

41
00:03:12.581 --> 00:03:18.798
記事でも、「何でもオールにせず対象を絞る」ことが大事な考え方として示されています。

42
00:03:18.798 --> 00:03:27.745
基本は、バックグラウンド・カラーやトランスフォームのように、変わってほしいプロパティの名前を一つずつ列挙することです。

43
00:03:27.745 --> 00:03:32.901
対象が明確だと、後から読んでも意図が伝わり、調整もしやすくなります。

44
00:03:32.901 --> 00:03:40.028
もちろん、すべての変化を滑らかにしたいと意図する場面では、オールを判断して使うこともできます。

45
00:03:40.028 --> 00:03:43.421
トランジションを指定する場所もポイントです。

46
00:03:43.421 --> 00:03:47.970
変化後の見た目は、ホバーのような状態側のルールに書きますが、トランジション自体は、

47
00:03:47.970 --> 00:03:52.520
通常状態のルールに書くのが基本です。

48
00:03:52.520 --> 00:03:56.452
通常状態に書いておけば、マウスが乗って変化するときも、離れて元に戻るときも、

49
00:03:56.452 --> 00:04:00.385
両方で滑らかに変化します。

50
00:04:00.385 --> 00:04:07.942
逆にホバー側にだけ書くと、乗せたときは滑らかでも、離した瞬間に指定が外れてパッと戻ってしまいます。

51
00:04:07.942 --> 00:04:13.031
往復の両方で効かせたいなら、置き場所は通常状態、と覚えてください。

52
00:04:13.031 --> 00:04:19.200
これはホバーに限らず、フォーカスや、クラスで状態が変わる場合でも同じ考え方です。

53
00:04:19.200 --> 00:04:22.820
記事の活用例を、まとめた形で見てみましょう。

54
00:04:22.820 --> 00:04:28.085
ボタンには通常状態で薄い緑の背景と、変化の対象を指定しています。

55
00:04:28.085 --> 00:04:32.280
ホバー、またはキーボードのフォーカスが当たると、背景がオレンジ寄りの色になり、

56
00:04:32.280 --> 00:04:36.476
少しだけ上へ移動します。

57
00:04:36.476 --> 00:04:42.893
このときトランジションが働いて、二百ミリ秒かけて色と位置が少しずつ変わります。

58
00:04:42.893 --> 00:04:51.120
注目してほしいのは、変化のきっかけと見た目は状態側に、変化の滑らかさは通常状態に分かれている点です。

59
00:04:51.120 --> 00:04:55.068
役割分担が分かると、コードが読みやすくなります。

60
00:04:55.068 --> 00:05:02.308
手元のブラウザーでマウスを乗せたり離したりして、実際の変化の速さも体感してみてください。

61
00:05:02.308 --> 00:05:05.560
一括指定には、もう一つ大事な性質があります。

62
00:05:05.560 --> 00:05:11.620
トランジションとしてまとめて書いたとき、書かなかった関連の値は、初期値に戻ります。

63
00:05:11.620 --> 00:05:16.054
たとえば後から別のルールで一括指定を書き直すと、以前そろえた時間が消えて、

64
00:05:16.054 --> 00:05:20.488
変化が一瞬で終わる、といったことが起こります。

65
00:05:20.488 --> 00:05:25.662
一部だけ変えたいときは、画面のように個別プロパティで足すのが安全です。

66
00:05:25.662 --> 00:05:28.322
また、このプロパティは継承しません。

67
00:05:28.322 --> 00:05:33.200
親に書いても子には効かないので、対象の要素自身に指定してください。

68
00:05:33.200 --> 00:05:36.327
変化を止めたいときの値が、ノーンです。

69
00:05:36.327 --> 00:05:42.415
ノーンを指定すると、トランジションは働かず、見た目は即座に切り替わります。

70
00:05:42.415 --> 00:05:47.846
比較の練習にも使えますし、動きが不要な場面の指定としても有効です。

71
00:05:47.846 --> 00:05:50.973
もう一つ、利用者への配慮も紹介します。

72
00:05:50.973 --> 00:05:55.909
端末やブラウザーには「動きを減らす」という設定があり、その設定が有効な人には、

73
00:05:55.909 --> 00:06:00.846
装飾的な動きを止める書き方が推奨されます。

74
00:06:00.846 --> 00:06:07.593
画面のようにメディアクエリで囲み、ノーンで止めるのが、記事で使われている方法です。

75
00:06:07.593 --> 00:06:12.530
すべての人に快適な動きを考えることも、大切な設計の一部です。

76
00:06:12.530 --> 00:06:20.100
動きを止める指定は、利用者の設定を尊重するためのもので、使い勝手を損なうものではありません。

77
00:06:20.100 --> 00:06:22.602
効かないときは、順番に確認しましょう。

78
00:06:22.602 --> 00:06:26.683
まず大前提として、トランジションは変化が起きて初めて働きます。

79
00:06:26.683 --> 00:06:32.740
ホバーしても対象プロパティの値が変わっていなければ、滑らかになる以前に変化自体がありません。

80
00:06:32.740 --> 00:06:34.452
次に、指定の置き場所です。

81
00:06:34.452 --> 00:06:41.562
状態側にだけ書いていないか、より後のルールに一括指定で上書きされ、時間が初期値に戻っていないかを確認します。

82
00:06:41.562 --> 00:06:45.973
最後に開発者ツールで、スタイルズに無効な宣言がないか、コンピューテッドで最終的な値がどうなっているかを見ると、

83
00:06:45.973 --> 00:06:50.383
原因を切り分けられます。

84
00:06:50.383 --> 00:06:56.440
それでも直らない場合は、スタイルシート自体が読み込まれているかも、改めて確認してみましょう。

85
00:06:56.440 --> 00:07:01.197
ブラウザー互換性は良好で、クローム、ファイアフォックス、サファリ、エッジのいずれも、

86
00:07:01.197 --> 00:07:05.954
かなり前のバージョンから接頭辞なしで使えます。

87
00:07:05.954 --> 00:07:09.467
安心して基本の書き方に集中できるプロパティです。

88
00:07:09.467 --> 00:07:16.639
練習としては、記事の例で二百ミリ秒の指定とノーンを見比べ、違いを自分の言葉で説明してみてください。

89
00:07:16.639 --> 00:07:22.348
値を一度に書き換えず、一つずつ変えて比べると、原因と結果が追いやすくなります。

90
00:07:22.348 --> 00:07:28.495
次回は、変化が始まるまでの待ち時間を決める、トランジション・ディレイを取り上げます。

91
00:07:28.495 --> 00:07:29.813
お疲れさまでした。

92
00:07:29.813 --> 00:07:36.692
個別のプロパティは今後一つずつ取り上げるので、この一括指定の形には先に見慣れておいてください。