WEBVTT

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

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

3
00:00:03.579 --> 00:00:07.456
今回のテーマは、トランジション・デュレーションです。

4
00:00:07.456 --> 00:00:12.376
前回は、変化の進み方、タイミング・ファンクションを取り上げました。

5
00:00:12.376 --> 00:00:17.446
今回はその隣の担当、変化にかける時間そのものを決めるプロパティです。

6
00:00:17.446 --> 00:00:22.740
同じボタンが少し上へ動く変化でも、六百ミリ秒かけてゆっくり終わるのか、百五十ミリ秒で素早く終わるのかで、

7
00:00:22.740 --> 00:00:28.033
操作したときの感触は大きく変わります。

8
00:00:28.033 --> 00:00:31.612
その時間を決める指定を、順番に見ていきましょう。

9
00:00:31.612 --> 00:00:33.208
位置づけを確認します。

10
00:00:33.208 --> 00:00:39.810
トランジションには、対象を決めるプロパティ、変化にかける時間を決めるデュレーション、

11
00:00:39.810 --> 00:00:46.412
進み方を決めるタイミング・ファンクション、始まるまでの待ち時間を決めるディレイの四つがありました。

12
00:00:46.412 --> 00:00:50.185
今回のデュレーションは、そのうち「時間」の担当です。

13
00:00:50.185 --> 00:00:57.876
一括指定の書き方では、最初に書いた時間がデュレーション、二番目に書いた時間がディレイになる決まりでしたね。

14
00:00:57.876 --> 00:01:02.374
進み方だけを変えたいときはタイミング・ファンクション、時間だけを変えたいときは、

15
00:01:02.374 --> 00:01:06.872
このデュレーションを書き換えるのが確実です。

16
00:01:06.872 --> 00:01:08.715
書き方を見てみましょう。

17
00:01:08.715 --> 00:01:15.014
セレクターで要素を選び、トランジション・デュレーションに、時間を指定するだけです。

18
00:01:15.014 --> 00:01:19.622
仕様上の初期値はゼロ秒、つまり何も書かなければ時間はゼロで、変化はアニメーションにならず、

19
00:01:19.622 --> 00:01:24.231
その場でパッと切り替わります。

20
00:01:24.231 --> 00:01:30.836
裏を返せば、滑らかな変化が見えているなら、どこかで時間が指定されているということです。

21
00:01:30.836 --> 00:01:33.601
また、このプロパティは継承しません。

22
00:01:33.601 --> 00:01:39.132
親に書いても子には効かないので、変化させたい要素自身に指定してください。

23
00:01:39.132 --> 00:01:43.740
この後の例では、まず六百ミリ秒を指定するところから始めます。

24
00:01:43.740 --> 00:01:45.836
時間の書き方を確認します。

25
00:01:45.836 --> 00:01:50.190
単位は二つ、秒を表すエスと、ミリ秒を表すエムエスです。

26
00:01:50.190 --> 00:01:56.317
一秒は千ミリ秒なので、ゼロ点六秒と六百ミリ秒は、まったく同じ長さを表します。

27
00:01:56.317 --> 00:02:03.090
短い時間は、百五十ミリ秒のようにミリ秒で書くほうが読みやすく、間違えにくいでしょう。

28
00:02:03.090 --> 00:02:05.670
ここで大事な注意が一つあります。

29
00:02:05.670 --> 00:02:13.248
時間はゼロ以上でなければならない決まりで、マイナスの値を書くと、宣言そのものが無効になります。

30
00:02:13.248 --> 00:02:16.473
単位を付け忘れた、ただの数字も無効です。

31
00:02:16.473 --> 00:02:21.472
時間を指定するときは、数字と単位が一セットだと思ってください。

32
00:02:21.472 --> 00:02:23.826
対象が複数のときの指定です。

33
00:02:23.826 --> 00:02:31.222
トランジションの対象が、背景色と位置の二つある場合、時間もカンマで区切って二つ書けます。

34
00:02:31.222 --> 00:02:38.788
一つ目の時間が一つ目の対象、二つ目の時間が二つ目の対象、というように、並び順で対応します。

35
00:02:38.788 --> 00:02:44.083
たとえば、背景色は六百ミリ秒かけてゆっくり、位置は百五十ミリ秒で素早く、

36
00:02:44.083 --> 00:02:49.379
といった具合に、対象ごとに時間を分けることができます。

37
00:02:49.379 --> 00:02:55.767
逆に、時間を一つだけ書いた場合は、すべての対象に、その同じ時間が使われます。

38
00:02:55.767 --> 00:03:03.500
進み方や待ち時間でも同じ考え方が使えるので、この対応の仕組みはまとめて押さえておきましょう。

39
00:03:03.500 --> 00:03:06.067
記事の活用例を見てみましょう。

40
00:03:06.067 --> 00:03:14.283
薄い緑色のボタンが用意され、背景色と位置の変化に、四百ミリ秒のトランジションが指定されています。

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

42
00:03:18.818 --> 00:03:23.354
ボタンが少し上へ移動します。

43
00:03:23.354 --> 00:03:28.830
注目は最後の行、トランジション・デュレーション、六百ミリ秒です。

44
00:03:28.830 --> 00:03:34.136
上の行で四百ミリ秒と書かれていた所要時間が、この行で六百ミリ秒に上書きされ、

45
00:03:34.136 --> 00:03:39.442
背景色も位置も、ゆっくり変化するようになります。

46
00:03:39.442 --> 00:03:45.432
どの行が最終的な時間を決めているのか、意識しながら読んでみてください。

47
00:03:45.432 --> 00:03:50.186
違いを確かめるには、最後の行の値だけを、百五十ミリ秒に置き換えます。

48
00:03:50.186 --> 00:03:51.864
変えるのは時間だけです。

49
00:03:51.864 --> 00:03:56.338
変化の対象も、移動する距離も、進み方も、すべて同じにそろえます。

50
00:03:56.338 --> 00:04:02.770
六百ミリ秒では、ホバーすると色と位置が、ゆっくりと時間をかけて変わっていく様子が見えました。

51
00:04:02.770 --> 00:04:08.083
百五十ミリ秒では、同じ変化がパッと素早く終わり、キビキビした印象になります。

52
00:04:08.083 --> 00:04:12.138
記事の比較も、この一か所だけを変える方法で行われています。

53
00:04:12.138 --> 00:04:16.612
複数の指定を一度に変えないことが、違いを正しく確かめるコツです。

54
00:04:16.612 --> 00:04:20.069
では、時間はどのくらいがよいのでしょうか。

55
00:04:20.069 --> 00:04:25.830
記事が挙げる注意点は、長すぎると操作への反応が遅く感じられることです。

56
00:04:25.830 --> 00:04:32.743
ボタンを押したのに、動きが終わるまで待たされるような感覚は、ストレスにつながります。

57
00:04:32.743 --> 00:04:38.339
決め方の目安は、変化の移動距離と、その要素の役割に合わせることです。

58
00:04:38.339 --> 00:04:45.911
ボタンやメニューのような、操作を助けるための補助的な動きは、短めの時間に収めるのが定石です。

59
00:04:45.911 --> 00:04:51.343
逆に、あえてゆっくり見せたい演出の場面では、長めの時間も選べます。

60
00:04:51.343 --> 00:04:57.104
まず短い値から試して、操作の邪魔にならない範囲で調整していきましょう。

61
00:04:57.104 --> 00:04:59.044
配慮の指定も確認します。

62
00:04:59.044 --> 00:05:08.099
記事の例には、端末で「動きを減らす」設定が有効なとき、トランジション自体を止めるメディアクエリが含まれています。

63
00:05:08.099 --> 00:05:15.376
動きに敏感な人にとっては、たとえゆっくりした変化であっても、負担になる場合があるためです。

64
00:05:15.376 --> 00:05:21.682
時間を調整できるからこそ、止めるという選択肢も、セットで用意しておきましょう。

65
00:05:21.682 --> 00:05:27.503
あわせて、トランジションはホバーだけで試して終わりにせず、キーボードのフォーカスが当たったときにも、

66
00:05:27.503 --> 00:05:33.324
同じ変化が起きるかを確認することが大切です。

67
00:05:33.324 --> 00:05:35.146
効かないときの確認です。

68
00:05:35.146 --> 00:05:42.435
まず前提として、トランジションの対象があり、ホバーなどで実際に値が変化しているかを見てください。

69
00:05:42.435 --> 00:05:47.446
時間が正しく指定されていても、変化自体がなければ、何も起きません。

70
00:05:47.446 --> 00:05:49.268
次に、時間の書き方です。

71
00:05:49.268 --> 00:05:55.494
単位を落としたり、マイナスを書いたりすると、宣言が無効として、丸ごと無視されます。

72
00:05:55.494 --> 00:06:05.213
開発者ツールでは、スタイルズで宣言が打ち消されていないか、コンピューテッドで最終的なデュレーションの値を確認する順番が有効です。

73
00:06:05.213 --> 00:06:10.072
スタイルシート自体が読み込まれているかの確認も、忘れずにどうぞ。

74
00:06:10.072 --> 00:06:11.732
ブラウザー互換性は良好です。

75
00:06:11.732 --> 00:06:15.347
プロパティ自体は、クローム、エッジ、ファイアフォックス、サファリのいずれも、

76
00:06:15.347 --> 00:06:18.963
かなり前のバージョンから接頭辞なしで使えます。

77
00:06:18.963 --> 00:06:22.164
まとめると、トランジション・デュレーションは、変化が始まってから終わるまでの時間、

78
00:06:22.164 --> 00:06:25.365
そのものを決める指定です。

79
00:06:25.365 --> 00:06:27.262
初期値はゼロ秒、継承はしません。

80
00:06:27.262 --> 00:06:32.004
練習として、六百ミリ秒と百五十ミリ秒の違いを、自分の言葉で説明してみてください。

81
00:06:32.004 --> 00:06:36.153
次回は、変化の対象を決める、トランジション・プロパティを取り上げます。

82
00:06:36.153 --> 00:06:37.220
お疲れさまでした。