普段私は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で作りました。
よかったら使ってください。

sassを見る