CSSリファレンス
animation-timing-functionの意味と使い方
「animation-timing-function」を使うと、アニメーションを実行する速度のパターンを指定できます。
animation-timing-functionプロパティは、アニメーション全体にではなく、キーフレームごとに適用されます。
値の指定方法
ease
ゆっくりと変化を始め、変化の途中で加速し、減速して終わります。cubic-bezier(0.25, 0.1, 0.25, 1)を指定した時と同じです。
linear
一定の速度で変化します。cubic-bezier(0, 0, 1, 1)を指定した時と同じです。
ease-in
ゆっくり変化を始め、その後加速します。cubic-bezier(0.42, 0, 1, 1)を指定した時と同じです。
ease-out
高速で変化を始め、減速しながら終わります。cubic-bezier(0, 0, 0,58, 1)を指定した時と同じです。
ease-in-out
ゆっくり変化をはじめ、徐々に加速し、減速しながら終わります。cubic-bezier(0.42, 0, 0.58, 1)を指定した時と同じです。
step-start
steps(1, start)を指定したときと同じです。
step-end
steps(1, end)を指定したときと同じです。
steps(ステップ数, startまたはend)
steps関数では、指定した回数で等間隔に分割して変化するようにします。1つ目の引数には、何段階(ステップ)で変化するかを「1」以上の整数で指定します。2つ目の引数には「start」または「end」を指定します。startを指定すると始点(開始時)に最初のステップが起き、endを指定すると終点(完了時)に最後のステップが起きます。2つ目の引数が省略された場合は「end」が指定されたものとみなされます。
cubic-bezier(x1, y1, x2, y2)
どのように変化させるかを、3次ベジュ曲線を使って指定します。