WEBVTT

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

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

3
00:00:03.382 --> 00:00:07.890
今回のテーマは、トランジション・タイミング・ファンクションです。

4
00:00:07.890 --> 00:00:12.258
前回は、変化が始まるまでの待ち時間、ディレイを取り上げました。

5
00:00:12.258 --> 00:00:17.894
今回は、変化が始まってから終わるまでの「速さの変わり方」を決めるプロパティです。

6
00:00:17.894 --> 00:00:23.601
たとえば、同じ四百ミリ秒でボタンが少し上へ動くとしても、最初から最後まで同じ速さなのか、

7
00:00:23.601 --> 00:00:29.307
ゆっくり動き出して、ゆっくり止まるのかで、見た目の印象は大きく変わります。

8
00:00:29.307 --> 00:00:32.548
その違いを作る指定を、順番に見ていきましょう。

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

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

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

12
00:00:46.315 --> 00:00:51.444
一括指定では、時間を二つ書くと一つ目がデュレーション、二つ目がディレイにあたり、

13
00:00:51.444 --> 00:00:56.573
イーズ・イン・アウトのような値がタイミング・ファンクションにあたります。

14
00:00:56.573 --> 00:01:02.511
画面の例では、背景色と位置の変化に、四百ミリ秒、イーズ・イン・アウトが指定されています。

15
00:01:02.511 --> 00:01:07.640
進み方だけを差し替えたいときは、今回の個別プロパティで指定するのが確実です。

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

17
00:01:09.604 --> 00:01:18.113
セレクターで要素を選び、トランジション・タイミング・ファンクションに、進み方を表す値を指定するだけです。

18
00:01:18.113 --> 00:01:25.314
仕様上の初期値はイーズで、つまり何も書かなければ、イーズの進み方が自動で使われています。

19
00:01:25.314 --> 00:01:29.077
これまで意識せずに滑らかな変化を見ていた場合も、実はこのイーズが効いていた、

20
00:01:29.077 --> 00:01:32.841
ということです。

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

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

23
00:01:41.678 --> 00:01:46.260
この後の例では、まずリニアを指定するところから始めます。

24
00:01:46.260 --> 00:01:48.460
代表的な値を見ていきます。

25
00:01:48.460 --> 00:01:52.522
リニアは、最初から最後まで一定の速さで進みます。

26
00:01:52.522 --> 00:01:56.584
等速なので、機械的ではっきりした動きになります。

27
00:01:56.584 --> 00:02:01.323
イーズ・インは、ゆっくり始まってだんだん速くなる進み方。

28
00:02:01.323 --> 00:02:06.231
イーズ・アウトはその逆で、速く始まってゆっくり止まります。

29
00:02:06.231 --> 00:02:13.000
イーズ・イン・アウトは、始まりと終わりの両方が緩やかで、真ん中が速い進み方です。

30
00:02:13.000 --> 00:02:20.616
そして初期値のイーズは、緩やかに始まって、終わりに向けて緩やかになる、標準的な進み方です。

31
00:02:20.616 --> 00:02:26.032
まずはこのキーワードから使い分けるのが、初心者にはおすすめです。

32
00:02:26.032 --> 00:02:27.905
応用的な値も紹介します。

33
00:02:27.905 --> 00:02:32.431
キュービック・ベジェは、加減速の曲線、専門的にはイージング曲線と呼ばれるものを、

34
00:02:32.431 --> 00:02:36.957
四つの数値で細かく指定する方法です。

35
00:02:36.957 --> 00:02:42.263
数値によっては、行き過ぎてから戻ってくるような、弾む動きも作れます。

36
00:02:42.263 --> 00:02:50.067
もう一つのステップスは、変化をなめらかにつなげず、指定した段数で、カクカクと段階的に進める指定です。

37
00:02:50.067 --> 00:02:52.720
コマ送りのような表現に使われます。

38
00:02:52.720 --> 00:02:57.402
どちらも表現の幅は広がりますが、最初はキーワードの違いを確かめることを優先し、

39
00:02:57.402 --> 00:03:02.084
必要になってから手を出すくらいで十分です。

40
00:03:02.084 --> 00:03:04.219
記事の活用例を見てみましょう。

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

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

43
00:03:14.824 --> 00:03:18.596
ボタンが少し上へ移動します。

44
00:03:18.596 --> 00:03:23.720
注目は最後の行、トランジション・タイミング・ファンクション、リニアです。

45
00:03:23.720 --> 00:03:31.265
上の行ではイーズで指定されていた進み方が、この行で上書きされ、両方の変化が一定の速さで進むようになります。

46
00:03:31.265 --> 00:03:36.816
どの行が進み方を決めているのかを意識しながら読むと、コードの構造がつかめます。

47
00:03:36.816 --> 00:03:42.918
違いを確かめるには、最後の行の値だけをイーズ・イン・アウトに置き換えます。

48
00:03:42.918 --> 00:03:48.195
ポイントは、デュレーションを四百ミリ秒のまま、そろえることです。

49
00:03:48.195 --> 00:03:50.999
合計の時間も、移動する距離も同じ。

50
00:03:50.999 --> 00:03:54.297
違うのは、その中での速さの配分だけです。

51
00:03:54.297 --> 00:04:00.317
リニアでは最初から最後まで同じペースで進むのに対して、イーズ・イン・アウトでは、

52
00:04:00.317 --> 00:04:06.336
動き出しと終わり際が緩やかになり、全体にやわらかい印象になります。

53
00:04:06.336 --> 00:04:11.119
記事の比較も、この値一つだけを変える方法で行われています。

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

55
00:04:16.396 --> 00:04:18.559
間違えやすい点を確認します。

56
00:04:18.559 --> 00:04:25.511
デュレーションを変えると、変化にかかる合計の時間そのものが長くなったり短くなったりします。

57
00:04:25.511 --> 00:04:30.918
一方、タイミング・ファンクションを変えても、合計の時間は変わりません。

58
00:04:30.918 --> 00:04:37.715
変わるのは、その時間の中で、どの区間を速く進み、どの区間をゆっくり進むかという配分です。

59
00:04:37.715 --> 00:04:43.122
列車に例えると、所要時間がデュレーションで、駅の間での加速や減速のしかたがタイミング・ファンクション、

60
00:04:43.122 --> 00:04:48.529
とイメージすると区別しやすいでしょう。

61
00:04:48.529 --> 00:04:53.936
比較実験では、デュレーションを固定して進み方だけを変えるのが鉄則です。

62
00:04:53.936 --> 00:04:56.068
使いどころを考えましょう。

63
00:04:56.068 --> 00:05:04.924
ボタンやメニューのような短い変化では、両端が緩やかな進み方にすると、操作に自然に追随している印象になります。

64
00:05:04.924 --> 00:05:12.304
逆に、リニアの等速は、進捗バーのような、一定であること自体に意味がある場面に向いています。

65
00:05:12.304 --> 00:05:20.668
なお、対象ごとに進み方を変えたい場合は、値をカンマで区切って、対象の並び順に対応させることもできます。

66
00:05:20.668 --> 00:05:25.916
あわせて、端末の「動きを減らす」設定が有効な人には、メディアクエリでトランジション自体を止める配慮も、

67
00:05:25.916 --> 00:05:31.164
記事の例に含まれています。

68
00:05:31.164 --> 00:05:32.932
効かないときの確認です。

69
00:05:32.932 --> 00:05:36.763
進み方は、変化そのものがあって初めて意味を持ちます。

70
00:05:36.763 --> 00:05:44.866
まず、トランジションの対象とデュレーションが指定され、ホバーなどで実際に値が変わっているかを確認してください。

71
00:05:44.866 --> 00:05:51.054
特に、デュレーションがゼロのままだと、変化は一瞬で終わり、進み方の違いは見えません。

72
00:05:51.054 --> 00:05:55.621
また、値の綴りを間違えた宣言は、無効として丸ごと無視されます。

73
00:05:55.621 --> 00:06:04.167
開発者ツールでは、スタイルズで宣言が打ち消されていないか、コンピューテッドで最終的な進み方を確認する順番が有効です。

74
00:06:04.167 --> 00:06:07.408
スタイルシート自体の読み込み確認も忘れずに。

75
00:06:07.408 --> 00:06:09.178
ブラウザー互換性は良好です。

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

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

78
00:06:16.892 --> 00:06:22.455
リニアやイーズ・イン・アウトといった値に限れば、さらに古いバージョンから対応しています。

79
00:06:22.455 --> 00:06:28.272
まとめると、タイミング・ファンクションは、合計の時間の中で、速さの変わり方を決める指定です。

80
00:06:28.272 --> 00:06:30.295
初期値はイーズ、継承はしません。

81
00:06:30.295 --> 00:06:35.606
練習として、リニアとイーズ・イン・アウトの違いを、自分の言葉で説明してみてください。

82
00:06:35.606 --> 00:06:41.170
次回は、変化にかける時間そのものを決める、トランジション・デュレーションを取り上げます。

83
00:06:41.170 --> 00:06:42.308
お疲れさまでした。