animationアニメーション仕組み

最終更新日:2021.10.01 [金] 公開日:2020.08.01 [土] カテゴリー:html・CSS・JS備忘

Pocket
Facebook にシェア
LINEで送る

animationスタイルはtransitionよりも少し細かい動きの設定ができます。 transitionは最初と最後のスタイルの設定だけですが、animationだと間の動きにもスタイルを入れることができるので、より動きが細やかにできます。

この動きは以下のスタイルで設定されています。

animationプロパティ

animation-name設定するkeyframeのアニメーションの名前を指示する。
animation-duration 変化にかかる時間。アニメーション開始から終了までの時間。 初期値0s
animation-timing-function変化前・変化後の間の動きの速度などの変化。イージング。

ease:変化の始まりと終わりが速く動く
ease-in:変化の始まりがゆっくり動く
ease-out:変化の終わりがゆっくり動く
ease-in-out:変化の始まりち終わりがゆっくり動く
linear:ずっと同じスピートで動く
cubic-bezier:カスタム設定
steps(数値,start):開始時点で指定した数値の段階で変化
steps(数値,end):終了時点で変化完了するように指定した数値の段階で変化
step-start:開始時点で変化
step-end:終了時点で変化

animation-delayアニメーションが始まるまでの時間。初期値0s
animation-iteration-count設定したアニメーションを何回繰り返すか。初期値は1。
infiniteで無限に繰り返しループ
animation-directionアニメーションの再生方向。normal(初期値):通常再生
reverse:反対再生
alternate:通序方向逆方向を繰り返す
alternate-reverse:逆方向通常方向を繰り返す
animation-fill-mode アニメーション開始前終了後のスタイル。初期値はnone。 none(初期値):開始前終了後にアニメーションのスタイルは適用されない
forwards:終了時のスタイルがアニメーションのスタイル
backwards:開始時のスタイルが開始前にも適用
both:forwardsとbackwardsどちらも適用
animation-play-stateアニメーションの再生or停止。初期値はrunning(実行)running(初期値):再生
paused:一時停止
animationまとめて指定可能。半角区切りで上記の値を入れていく。 animation: nameの値 durationの値 timingの値 delayの値 iterationの値 directionの値 fillの値 playの値 ;
詳細はMDN

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA