Para poder entender y diferenciar entre estos 6 tipos (ease, linear, ease-in, ease-out, ease-in-outcubic-bezier) de “curvas de velocidad” de las transiciones CSS3 lo mejor es verlos en acción.

La propiedad transition-timing-function es la que se encarga de la curva de velocidad del efecto de transición.

Sitúate con el cursor encima de la siguiente caja para ver las transiciones:

Ninguna
ease
ease-in
ease-out
ease-in-out
linear
cubic-bezier

En este ejemplo puedes ver las diferentes curvas de velocidad para cada una de estas transiciones.

El valor cubic-bezier, es el “master” de los efectos de transición, ya que es totalmente personalizable del modo: cubic-bezier(x, y, z, w). Hay varias herramientas online (http://cssglue.com/cubic) para generar la curva más fácilmente.

El html del ejemplo:

CSS del ejemplo:

pd: La propiedad transition-timing-function no es compatible en IE9 y inferiores.