WEBVTT

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

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

3
00:00:03.113 --> 00:00:07.264
今回のテーマは、アニメーション・タイミング・ファンクションです。

4
00:00:07.264 --> 00:00:12.842
このプロパティが決めるのは、アニメーションの「進み方」、つまり速さの変化のしかたです。

5
00:00:12.842 --> 00:00:16.863
たとえば箱が右へ移動する動きで、再生時間も移動する距離もまったく同じでも、

6
00:00:16.863 --> 00:00:20.885
最初から最後まで同じ速さで進むのか、ゆっくり動き出して最後はそっと止まるのかで、

7
00:00:20.885 --> 00:00:24.906
見た目の印象は大きく変わります。

8
00:00:24.906 --> 00:00:29.446
時間の長さはデュレーション、始まるまでの待ち時間はディレイの担当です。

9
00:00:29.446 --> 00:00:35.932
このタイミング・ファンクションは、その間の「加速と減速のカーブ」を担当するツマミだと考えてください。

10
00:00:35.932 --> 00:00:38.788
進み方をグラフで考えてみましょう。

11
00:00:38.788 --> 00:00:42.989
横軸が時間、縦軸がどれだけ進んだかを表すとします。

12
00:00:42.989 --> 00:00:46.853
等速の動きは、ななめ一直線のグラフになります。

13
00:00:46.853 --> 00:00:50.886
時間がたつほど、一定の割合で進んでいくからです。

14
00:00:50.886 --> 00:00:56.598
一方、ゆっくり始まってゆっくり終わる動きは、最初はゆるやか、真ん中で急になり、

15
00:00:56.598 --> 00:01:02.311
最後はまたゆるやかになる、エスの形に近いカーブを描きます。

16
00:01:02.311 --> 00:01:07.519
スタートとゴールはどちらも同じなのに、途中の速さの配分が違う。

17
00:01:07.519 --> 00:01:09.536
それが進み方の違いです。

18
00:01:09.536 --> 00:01:15.584
このカーブの形を、言葉や数値で指定するのが、今回のプロパティの役割です。

19
00:01:15.584 --> 00:01:19.617
イメージとしては、電車の発車と停車に似ています。

20
00:01:19.617 --> 00:01:24.741
急に飛び出して急に止まるのではなく、駅を出るときと入るときはゆっくり、というあの感覚を、

21
00:01:24.741 --> 00:01:29.866
画面の中の動きで再現するわけです。

22
00:01:29.866 --> 00:01:31.340
書き方を確認します。

23
00:01:31.340 --> 00:01:37.384
対象の要素を選ぶセレクター、中括弧、プロパティ名、コロン、値、セミコロンの順です。

24
00:01:37.384 --> 00:01:43.281
画面の例では、デモというクラスを持つ要素に、進み方としてリニアを指定しています。

25
00:01:43.281 --> 00:01:45.787
ここではまず形を押さえてください。

26
00:01:45.787 --> 00:01:49.620
値には、このあと紹介するキーワードや関数を書きます。

27
00:01:49.620 --> 00:01:55.664
コロンやセミコロンを落とすと、その宣言だけが無効になってしまうので注意しましょう。

28
00:01:55.664 --> 00:01:59.202
なお、このプロパティは単独では何も動かしません。

29
00:01:59.202 --> 00:02:04.214
アニメーションの名前や再生時間と組み合わせて、初めて意味を持ちます。

30
00:02:04.214 --> 00:02:06.274
主なキーワードを並べます。

31
00:02:06.274 --> 00:02:13.247
イーズは初期値で、ゆっくり始まり、速くなって、ゆっくり終わる、標準的で無難な進み方です。

32
00:02:13.247 --> 00:02:17.209
リニアは、最初から最後まで同じ速さを保つ等速です。

33
00:02:17.209 --> 00:02:24.974
イーズインはゆっくり始まってだんだん速くなり、イーズアウトは逆に、速く始まってゆっくり終わります。

34
00:02:24.974 --> 00:02:32.740
イーズインアウトは、開始と終了の両方をゆるやかにしたもので、イーズよりも緩急がはっきりしています。

35
00:02:32.740 --> 00:02:40.981
迷ったら、まずイーズとリニアとイーズインアウトの三つを切り替えて、動きの違いを見比べるのがおすすめです。

36
00:02:40.981 --> 00:02:45.259
なお、何も指定しなければ初期値のイーズが効いています。

37
00:02:45.259 --> 00:02:52.074
だからこそ、違いを体感するには、あえてリニアに変えて等速の動きと見比べるのが近道です。

38
00:02:52.074 --> 00:02:58.279
キーワードで足りなければ、キュービックベジエという関数でカーブを自作できます。

39
00:02:58.279 --> 00:03:05.121
括弧の中に四つの数値を書き、曲線の曲がり具合を決める、二つのつまみの位置を指定します。

40
00:03:05.121 --> 00:03:13.712
たとえば、ゼロ点四二、ゼロ、ゼロ点五八、一、という組み合わせは、イーズインアウトとほぼ同じカーブになります。

41
00:03:13.712 --> 00:03:18.485
最初は難しく感じるかもしれませんが、開発者ツールにはカーブをグラフで編集できる仕組みがあり、

42
00:03:18.485 --> 00:03:23.259
動かしながら動きを試せます。

43
00:03:23.259 --> 00:03:29.782
キーワードは、この数値の代表例に名前を付けたものだ、と理解すると整理しやすいです。

44
00:03:29.782 --> 00:03:31.901
もう一つの関数がステップスです。

45
00:03:31.901 --> 00:03:37.859
これは滑らかに進むのではなく、動きを指定した段数で区切って、カクカクと段階的に進ませます。

46
00:03:37.859 --> 00:03:42.494
たとえばステップス、カッコ四と書けば、全体の動きが四段階に分かれます。

47
00:03:42.494 --> 00:03:48.849
カウントダウンの表示や、ドット絵のキャラクターがコマ送りのように動く表現などで使われる指定です。

48
00:03:48.849 --> 00:03:56.662
似たキーワードに、最初の一段をすぐ進めるステップ・スタートと、最後まで待ってから一段進めるステップ・エンドもあります。

49
00:03:56.662 --> 00:04:00.634
滑らかさとは逆の、機械的なリズムを作る道具と覚えてください。

50
00:04:00.634 --> 00:04:02.868
実例で比べてみましょう。

51
00:04:02.868 --> 00:04:10.687
土台として、箱が右へ一レムだけ移動する、スライドインというキーフレームを用意します。

52
00:04:10.687 --> 00:04:18.320
下の指定では、この動きを一秒かけて、〇・三秒の遅延のあと、一回だけ再生しています。

53
00:04:18.320 --> 00:04:23.160
そして最後の行で、進み方をリニアに上書きしています。

54
00:04:23.160 --> 00:04:29.676
このとき、再生時間は一秒、移動量は一レムで、ほかの設定は変わりません。

55
00:04:29.676 --> 00:04:32.469
変えているのは進み方だけです。

56
00:04:32.469 --> 00:04:40.660
画面で比べると、リニアの方は、最初の一歩からゴールまで、ずっと同じペースで進み続けます。

57
00:04:40.660 --> 00:04:45.873
記事のサンプルは再読み込みで最初から再生できますので、この等速な進み方を、

58
00:04:45.873 --> 00:04:51.086
まず目で追って感覚をつかんでください。

59
00:04:51.086 --> 00:04:56.117
では最後の行の値だけを、イーズインアウトに変えてみます。

60
00:04:56.117 --> 00:05:05.100
再生時間も移動量も同じですが、動き出しはそっと、そして最後はゆるやかに減速して止まるように見えます。

61
00:05:05.100 --> 00:05:10.131
同じ一秒でも、こちらの方が丁寧で柔らかい印象になります。

62
00:05:10.131 --> 00:05:12.287
ここで大事な注意が一つ。

63
00:05:12.287 --> 00:05:17.766
進み方を書いたあとに、アニメーションの一括指定を書き足すと、一括指定に含まれる初期値で、

64
00:05:17.766 --> 00:05:23.246
進み方まで上書きされてしまいます。

65
00:05:23.246 --> 00:05:27.738
個別の指定は、一括指定より後ろに書くのが安全です。

66
00:05:27.738 --> 00:05:29.398
間違えやすい点を一つ。

67
00:05:29.398 --> 00:05:34.605
タイミング・ファンクションは、アニメーション全体に一本のカーブを引く指定だと思われがちですが、

68
00:05:34.605 --> 00:05:39.812
実際はキーフレームの区間ごとに適用されます。

69
00:05:39.812 --> 00:05:44.037
キーフレームが、ゼロパーセント、五〇パーセント、百パーセントのように複数ある場合、

70
00:05:44.037 --> 00:05:48.263
その間ごとに進み方が効きます。

71
00:05:48.263 --> 00:05:56.564
つまり区間の数が多いと、その分だけ加速と減速が繰り返され、区間の境目で急に速さが変わって見えることがあります。

72
00:05:56.564 --> 00:06:02.148
思ったよりギクシャクすると感じたら、区間ごとの効き方を疑ってみてください。

73
00:06:02.148 --> 00:06:03.926
効かないときの確認です。

74
00:06:03.926 --> 00:06:07.186
まず前提として、進み方は単独では動きません。

75
00:06:07.186 --> 00:06:12.669
アニメーションの名前と再生時間がなければ、比較する動き自体が存在しません。

76
00:06:12.669 --> 00:06:16.225
次に、先ほど触れた一括指定との順番を確認します。

77
00:06:16.225 --> 00:06:21.856
後から書かれた一括指定が、進み方を初期値のイーズへ戻しているかもしれません。

78
00:06:21.856 --> 00:06:30.746
開発者ツールでは、スタイルズで宣言に取り消し線が付いていないか、コンピューテッドで最終的な値がどうなっているかを見ます。

79
00:06:30.746 --> 00:06:35.636
また、端末やブラウザーの「動きを減らす」設定が有効だと、アニメーション自体が止められ、

80
00:06:35.636 --> 00:06:40.526
指定が効いていないように見える場合もあります。

81
00:06:40.526 --> 00:06:42.472
最後に基本情報をまとめます。

82
00:06:42.472 --> 00:06:46.086
初期値はイーズで、書かなければこの進み方で動きます。

83
00:06:46.086 --> 00:06:47.198
継承はしません。

84
00:06:47.198 --> 00:06:53.036
ほかのアニメーション関連のプロパティと同じく、動きを持たせたい要素ごとに指定します。

85
00:06:53.036 --> 00:06:56.997
ブラウザーの対応は広く、クローム、エッジ、ファイアフォックス、サファリのいずれでも、

86
00:06:56.997 --> 00:07:00.959
長く使えてきたプロパティです。

87
00:07:00.959 --> 00:07:08.326
練習として、同じ動きにリニアとイーズインアウトを設定し、どちらが内容に合うかを言葉で説明してみてください。

88
00:07:08.326 --> 00:07:11.384
時間と距離が同じでも、進み方で印象が変わる。

89
00:07:11.384 --> 00:07:15.137
その感覚をつかめれば、このプロパティは使いこなせます。

90
00:07:15.137 --> 00:07:21.114
次回は、繰り返し回数を決める、アニメーション・イテレーション・カウントを取り上げます。