スクロールダウンを指示する動きのあるデザインを探してましたが、ちょうど良いものが見つけられなかったので、CSSアニメーションの練習も兼ねて作成してみました。
ゴール（条件）
・コピー＆ペーストで使い回せるように、スクロールダウンアニメーションを複数個作る
・CSS Animationを使ってCSSアニメーションを作成する
CSSアニメーションのサンプル
See the Pen scroll arrow by yamaki (@yamaki0405) on CodePen.
See the Pen scroll arrow2 by yamaki (@yamaki0405) on CodePen.
See the Pen scroll arrow3 by yamaki (@yamaki0405) on CodePen.
CSSアニメーション早見表
今回CSS Animationを使ってみて苦労したのが、プロパティ名と値でした。
色々できる分、名称と値が覚えられず（特にanimation-timing-function）、
作成する度に調べてたので今後の為に表にまとめました。
詳しい解説に関しては、他の方がまとめてくださっているのでそちらを参考にしてみてください。
（※参考サイトはページ下部にまとめて記載してあります）
| プロパティ名 | 説明 |
|---|---|
| animation-name | アニメーションの名前 |
| animation-duration | アニメーションが始まって終わるまでの時間を指定 |
| animation-timing-function | アニメーションの進行の度合いを指定 |
| animation-delay | アニメーションが始まる時間を指定 |
| animation-iteration-count | アニメーションの繰り返し回数を指定（無限にループはinfinite） |
| animation-direction | アニメーションの再生方向を指定 |
| animation-fill-mode | アニメーションの開始前、終了後のスタイルを指定 |
| animation-play-state | アニメーションの再生・停止を指定 |
| animation | 上の8つのプロパティを一括で指定できるショートハンドプロパティ |
animation-timing-function
| 値 | 説明 |
|---|---|
| ease（初期値） | 開始時と終了時が緩やかに変化する |
| linear | 開始から終了まで一定に変化する |
| ease-in | 開始時は緩やかに変化し、終了時に近づくと早く変化する |
| ease-out | 開始時は早く変化し、終了時は緩やかに変化する |
| ease-in-out | 開始時と終了時は、かなり緩やかに変化する |
| step-start | 変化の開始時点で終了状態に変化する |
| step-end | 開始時に変化せず、終了時に変化が完了した状態になる |
| steps（正数, start または end） | 指定した正数の段階で変化する。 start を指定すると、アニメーション開始時から変化し、 end を指定すると、アニメーション終了時に変化する。 |
| cubic-bezier（x軸の値, y軸の値, x軸の値, y軸の値） | 変化の度合いを3次ベジェ曲線で指定する |
animation-direction
| 値 | 説明 |
|---|---|
| normal（初期値） | 毎回、順方向のアニメーションを再生 |
| reverse | 毎回、逆方向からのアニメーションを再生 |
| alternate | 順方向、逆方向のアニメーションを交互に繰り返す |
| alternate-reverse | 逆方向、順方向のアニメーションを交互に繰り返す |
animation-fill-mode
| 値 | 説明 |
|---|---|
| none（初期値） | アニメーションで指定したスタイルは、アニメーションの前後には適用されない |
| forwards | アニメーション終了時のスタイルがアニメーション終了後にも適用される |
| backwards | アニメーション開始時のスタイルがアニメーション開始前にも適用される |
| both | forward と backwards の両方が適用される |
animation-play-state
| 値 | 説明 |
|---|---|
| running（初期値） | アニメーションが実行される |
| paused | アニメーションが停止される |
以上です。
最後までお読みいただき、ありがとうございました。