普段私はtransition-timing-functionプロパティはlinear、ease-in-outぐらいしか使わないですが、他にどんなtransition-timing-functionプロパティがあるのかと思って調べてみました。
ease
初めと終わりが滑らかなイージング。
cubic-bezier(0.25, 0.1, 0.25, 1.0)を指定した時と同じ動きです。
linear
一定の速度で変化するイージング
cubic-bezier(0.0, 0.0, 1.0, 1.0)を指定した時と同じ動きです。
ease-in
初めがゆっくりなイージング。
cubic-bezier(0.42, 0, 1.0, 1.0)を指定した時と同じ動きです。
ease-out
終わりがゆっくりなイージング。
cubic-bezier(0, 0, 0.58, 1.0)を指定した時と同じ動きです。
ease-in-out
初めと終わりがゆっくりなイージング。
cubic-bezier(0.42, 0, 0.58, 1.0)を指定した時と同じ動きです。
cubic-bezier
ベジェ曲線で自由にイージングが設定できます。
中々数値だけで設定するのは難しいのでcubic-bezier.comでビジュアル的に指定してみてください。
思ったよりcssで指定できるのって少ないんですね。cubic-bezierで作れる分は作りたいなぁと思ったので、少しsassで作りました。
よかったら使ってください。