WEBVTT

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

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

3
00:00:03.597 --> 00:00:08.243
今回のテーマは、アニメーション・イテレーション・カウントです。

4
00:00:08.243 --> 00:00:13.339
このプロパティが決めるのは、アニメーションを「何回繰り返すか」です。

5
00:00:13.339 --> 00:00:20.383
これまでのアニメーション関連の指定を思い出すと、動きの種類はネーム、一回分の再生時間はデュレーション、

6
00:00:20.383 --> 00:00:27.427
始まるまでの待ち時間はディレイ、進み方はタイミング・ファンクションが担当していました。

7
00:00:27.427 --> 00:00:29.975
今回はそこに「回数」が加わります。

8
00:00:29.975 --> 00:00:36.570
たとえば、箱がスッと右へ動く一回分の動きを、二回繰り返すのか、一度きりで終わらせるのか。

9
00:00:36.570 --> 00:00:39.268
それを決めるのがこのプロパティです。

10
00:00:39.268 --> 00:00:46.012
回数が違うだけで、動きの印象や、ユーザーが、また動いた、と気づく度合いは大きく変わります。

11
00:00:46.012 --> 00:00:48.952
まず「一回」の意味を確認しましょう。

12
00:00:48.952 --> 00:00:56.792
アニメーションの一回とは、キーフレームで定義した動きを、最初から最後まで一通り再生することです。

13
00:00:56.792 --> 00:01:01.855
箱が右へ移動する動きなら、元の位置から移動先までが一回分です。

14
00:01:01.855 --> 00:01:07.408
ここに回数が関係すると、全体の再生時間は単純な掛け算で考えられます。

15
00:01:07.408 --> 00:01:11.654
一回の再生が一秒で、三回繰り返せば、合計は三秒です。

16
00:01:11.654 --> 00:01:19.657
なお、開始までの待ち時間であるディレイは、繰り返しごとではなく、最初の再生の前に一度だけ入ります。

17
00:01:19.657 --> 00:01:22.924
回数を増やしても、待ち時間は増えません。

18
00:01:22.924 --> 00:01:26.517
逆に、回数を二回にすれば二周すると考えます。

19
00:01:26.517 --> 00:01:34.520
動きを確認するときは、この一周がどこからどこまでかを意識すると、回数の感覚がつかみやすくなります。

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

21
00:01:36.134 --> 00:01:43.237
対象の要素を選ぶセレクター、中括弧、プロパティ名、コロン、値、セミコロンの順に書きます。

22
00:01:43.237 --> 00:01:49.856
画面の例では、デモというクラスを持つ要素に、繰り返し回数として二を指定しています。

23
00:01:49.856 --> 00:01:54.214
これで、この要素のアニメーションは二回繰り返されます。

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

25
00:02:00.833 --> 00:02:04.707
なお、このプロパティは単独では何も動かしません。

26
00:02:04.707 --> 00:02:10.034
キーフレームの名前や再生時間と組み合わせて、初めて意味を持ちます。

27
00:02:10.034 --> 00:02:12.456
なお、値には単位を付けません。

28
00:02:12.456 --> 00:02:17.460
回数そのものを、数字のまま書くのがこのプロパティの決まりです。

29
00:02:17.460 --> 00:02:18.793
値の基本は数字です。

30
00:02:18.793 --> 00:02:24.660
何も指定しなければ初期値の一が効いていて、アニメーションは一回だけ再生されて終わります。

31
00:02:24.660 --> 00:02:28.394
二と書けば二回、三と書けば三回、同じ動きを繰り返します。

32
00:02:28.394 --> 00:02:34.527
読み込み直後に少しだけ注目を集めたい動きなら、このように限られた回数を指定するのが基本です。

33
00:02:34.527 --> 00:02:38.661
逆にゼロを指定すると、アニメーションはまったく再生されません。

34
00:02:38.661 --> 00:02:42.527
動きを止めておきたいときの指定として覚えておくと便利です。

35
00:02:42.527 --> 00:02:43.728
単位は付けません。

36
00:02:43.728 --> 00:02:47.461
秒数のようなエスは不要で、回数そのものを数字で書きます。

37
00:02:47.461 --> 00:02:52.661
たとえば、お知らせの印を三回だけ小さく揺らして注意を引く、といった使い方です。

38
00:02:52.661 --> 00:02:58.528
ずっと動き続けるわけではないので、読み手の邪魔になりにくいのが、限られた回数の良さです。

39
00:02:58.528 --> 00:03:03.028
少し意外かもしれませんが、値には小数も書けます。

40
00:03:03.028 --> 00:03:13.151
たとえば二点五と指定すると、アニメーションは二回を最後まで再生し、三回目は半分まで進んだところで終了します。

41
00:03:13.151 --> 00:03:18.026
つまり小数は、「途中までの再生」を表す指定なのです。

42
00:03:18.026 --> 00:03:23.557
動きの終わり方を細かく調整したいときに使えますが、途中で止まると中途半端に見えることも多いので、

43
00:03:23.557 --> 00:03:29.087
使う場面は限られます。

44
00:03:29.087 --> 00:03:31.150
普段は整数で十分です。

45
00:03:31.150 --> 00:03:34.149
なお、マイナスの値は書けません。

46
00:03:34.149 --> 00:03:37.899
マイナスを指定した宣言は無効になります。

47
00:03:37.899 --> 00:03:46.148
これは、キーフレームの途中の状態でアニメーションを終わらせたい場合に意味を持つ指定です。

48
00:03:46.148 --> 00:03:50.385
数字の代わりに、インフィニットというキーワードも書けます。

49
00:03:50.385 --> 00:03:57.398
これを指定すると、アニメーションは終わることなく、ページが表示されている間ずっと繰り返されます。

50
00:03:57.398 --> 00:04:03.389
代表的な使い道は、読み込み中であることを伝える、ぐるぐると回り続ける表示などです。

51
00:04:03.389 --> 00:04:07.333
逆に言えば、インフィニットには「終わり」がありません。

52
00:04:07.333 --> 00:04:15.223
ユーザーの操作で止める、画面が切り替わって消えるなど、終了のタイミングは自分の設計で用意する必要があります。

53
00:04:15.223 --> 00:04:19.314
次の注意点にもつながるので、使いどころは選んでください。

54
00:04:19.314 --> 00:04:24.720
時計の針のように回り続ける表示や、読み込み中のアイコンが、その代表例です。

55
00:04:24.720 --> 00:04:26.992
実例で流れを確認しましょう。

56
00:04:26.992 --> 00:04:33.484
土台はこれまでと同じ、箱が右へ一レム移動するスライドインというキーフレームです。

57
00:04:33.484 --> 00:04:41.113
下の指定では、この動きを一秒かけて、〇・三秒の遅延のあと、一回だけ再生するよう設定しています。

58
00:04:41.113 --> 00:04:45.495
そして最後の行で、繰り返し回数を二に上書きしています。

59
00:04:45.495 --> 00:04:51.338
その結果、〇・三秒待ったあと、一秒の動きが二回、合計二秒間再生されます。

60
00:04:51.338 --> 00:04:59.778
記事のサンプルはページの再読み込みで最初から試せますので、まず二回繰り返す様子を目で追ってみてください。

61
00:04:59.778 --> 00:05:07.893
ポイントは、一括指定の中にある一が、もともとの回数で、直後の個別指定がそれを上書きしていることです。

62
00:05:07.893 --> 00:05:11.788
それから保存して、ブラウザーを再読み込みします。

63
00:05:11.788 --> 00:05:14.049
では値だけを一に変えてみます。

64
00:05:14.049 --> 00:05:19.625
動き自体は同じですが、再生は一回で終わり、全体の時間も一秒だけになります。

65
00:05:19.625 --> 00:05:23.845
二回繰り返したときと比べると、あっさりと感じるはずです。

66
00:05:23.845 --> 00:05:29.422
このように、繰り返すことで印象の強さを調整できるのが、回数指定の役割です。

67
00:05:29.422 --> 00:05:31.230
ここでも注意は順番です。

68
00:05:31.230 --> 00:05:37.259
一括指定のアニメーションを後から書き足すと、回数は初期値の一に戻ってしまいます。

69
00:05:37.259 --> 00:05:40.726
個別の指定は、一括指定より後ろに書きましょう。

70
00:05:40.726 --> 00:05:45.699
ブラウザーを再読み込みして、一回だけの動きと見比べてみてください。

71
00:05:45.699 --> 00:05:47.960
違いははっきり分かるはずです。

72
00:05:47.960 --> 00:05:50.880
インフィニットを使うときの注意点です。

73
00:05:50.880 --> 00:05:58.410
ずっと動き続ける要素が画面にあると、文章を読む集中を妨げたり、見ていて疲れたりすることがあります。

74
00:05:58.410 --> 00:06:04.404
自動で動き続ける仕掛けには、止めるための操作を用意しておくのが親切な設計です。

75
00:06:04.404 --> 00:06:08.477
たとえばホバーやクリックでアニメーション・プレイ・ステートを一時停止に切り替える、

76
00:06:08.477 --> 00:06:12.549
といった方法があります。

77
00:06:12.549 --> 00:06:18.543
また、利用者の環境で「動きを減らす」設定が有効な場合は、メディアクエリで装飾的なアニメーションそのものを止める対応も、

78
00:06:18.543 --> 00:06:24.536
記事の例のように用意しておきましょう。

79
00:06:24.536 --> 00:06:31.452
特に、文章を読むページでは、視界のはしで何かが動き続けると、内容が頭に入りにくくなります。

80
00:06:31.452 --> 00:06:33.141
効かないときの確認です。

81
00:06:33.141 --> 00:06:39.334
まず前提として、キーフレームの名前と再生時間がなければ、繰り返す動き自体が存在しません。

82
00:06:39.334 --> 00:06:43.979
特に再生時間がゼロ秒のままだと、回数を増やしても目には見えません。

83
00:06:43.979 --> 00:06:45.527
次に順番を確認します。

84
00:06:45.527 --> 00:06:50.454
後から書かれた一括指定が、回数を初期値の一に戻しているかもしれません。

85
00:06:50.454 --> 00:06:57.914
開発者ツールでは、スタイルズで宣言に取り消し線が付いていないか、コンピューテッドで最終的な値を確認します。

86
00:06:57.914 --> 00:07:01.996
あわせて、ディレイの待ち時間中は、まだ始まっていないだけという場合もあるので、

87
00:07:01.996 --> 00:07:06.078
少し待ってから観察することも大切です。

88
00:07:06.078 --> 00:07:11.004
また、対象の要素とは別のクラスが、回数を上書きしていることもあります。

89
00:07:11.004 --> 00:07:13.960
セレクターの詳細度も含めて確認しましょう。

90
00:07:13.960 --> 00:07:16.075
最後に基本情報をまとめます。

91
00:07:16.075 --> 00:07:18.189
初期値は一、継承はしません。

92
00:07:18.189 --> 00:07:22.721
ブラウザーの対応も広く、クロームは四三以降、エッジは一二以降、ファイアフォックスは一六以降、

93
00:07:22.721 --> 00:07:27.253
サファリは九以降で使えます。

94
00:07:27.253 --> 00:07:32.237
練習として、同じ動きに一、二、インフィニットの三つを設定し、印象の違いと、

95
00:07:32.237 --> 00:07:37.222
全体の再生時間がどう変わるかを言葉で説明してみてください。

96
00:07:37.222 --> 00:07:42.056
回数は地味な指定ですが、動きのしつこさを決める大事なツマミです。

97
00:07:42.056 --> 00:07:48.098
次回は、一回分の再生時間を決める、アニメーション・デュレーションを取り上げます。

98
00:07:48.098 --> 00:07:54.140
これで、アニメーションの回数・進み方・待ち時間をそろって扱えるようになりました。