Uso de la propiedad 'transición-timing-function' en CSS3

La propiedad 'transición-timing-function' determina los valores de transición ( Velocidad ), y la duración en una animación, estos efectos se denominan comúnmente 'easing functions', estas son funciones matematicas que generan una especificación las cuales se visualizan por puntos, estas se definen en una grafica llamada 'cubic bezier'.

Esta es la grafica del 'cubic bezier'

ease (0.25, 0.1, 0.25, 1.0)

linear (0.0, 0.0, 1.0, 1.0)

ease-in (0.42, 0, 1.0, 1.0)

ease-out (0, 0, 0.58, 1.0)

ease-in-out (0.42, 0, 0.58, 1.0)

Lo que vemos son los valores predefinidos de tiempo, pero si queremos podemos manipularlos, hay dos maneras de hacerlo, podemos hacerlos manualmente para lograr una transición diferente ó, existen algunas paginas las cuales nos facilitan la creacion de nuevas transiciones.

-

Cubic Bezier Editor

-

Cubic Bezier

Espero y esta publicación sea de mucha ayuda...