animationについて学ぶ

animation-name

ハイフンもしくはa-zで始まり、0-9、アンダースコアが使用できる。「--」は使えず、文字の大小は区別されない。

animation-duration

アニメーションがの開始から終了までの間隔。単位はs、ms。

animation-timing-function

アニメーションの始まりから終わりまでの速度。

ease, linear, ease-in, ease-out, ease-in-out, cubicbezier()

steps(n, term)。termにはjump-start, jump-end, jump-none, jump-both, start, endが入る。

step-start (steps(1, jump-start))、step-end (steps(1, jump-end))のキーワードでも作用する。

animation-delay

表示後、アニメーションが開始するまでの遅延時間を指定できる。単位はs, ms。

animation-iteration-count

アニメーション自体の繰り返し回数を指定できる。

infiniteキーワードで無限になる。

animation-direction

アニメーションの再生方向。

normal(順方向、デフォルト)、reverse(逆方向)、alternate(初回は順方向で以後は毎回反転)、alternate-reverse(初回は逆方向で以後は毎回反転)

animation-fill-mode

スタイルの適用をコントロールする。

none(デフォルト)、forwards(実行の最後のキーフレームを保持する)、backwards(実行の最後に初期の定義を適用する)、both(forwards, backwardsどちらも適用する)

animation-play-state

アニメーションの状態

running(動作中、デフォルト)、paused(停止中)

jsでのイベントハンドリング