animation-timing-functionとは、アニメーションの変化(速度)のスタイルを指定します。
cssのkeyframe animation には非常に多くのtiming-functionが用意されています。ちなみにjQueryでデフォルトで使えるのは2種類です。
それぞれのanimation-timing-functionを使い分ける事で、さらに色々な表現が可能です。
animation-timing-functionの値
-ease(初期値) 開始と終了を滑らかに変化します
- linear 直線的(一定速度)に変化します
- ease-in ゆっくり開始します
- ease-out ゆっくり終了します
-ease-in-out ゆっくり開始してゆっくり終了します
- step-start 開始から終了状態に一気に変化し、その後は変化しません
- step-end 最初は変化せず、最後の段階へ一気に変化します
- steps(ステップ数,起点キーワード) 1つ目の値にステップ数、2つ目の値にstart、endのいずれかを指定します
- cubic-bezier(n,n,n,n) 三次ベジェ曲線の軌跡によって変化の進行度を指定します。
cubic-bezierはジェネレーターを使用するのが一般的です。
cubic-bezier.com
See the Pen
animation-timing-functionの違い by yachin29 (@yachin29)
on CodePen.
