32
38

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

CSSアニメーションでスクロールダウンデザイン(サンプル付き)

Last updated at Posted at 2019-02-14

スクロールダウンを指示する動きのあるデザインを探してましたが、ちょうど良いものが見つけられなかったので、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 アニメーションが停止される

以上です。
最後までお読みいただき、ありがとうございました。


今回、作業するにあたってお世話になったサイト

初心者も使えるCSSアニメーションの基本
CSSアニメーション 入門

32
38
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32
38

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?