Transiciones (funciones de transición)

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

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.

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).

Ninguna

ease

ease-in

ease-out

ease-in-out

linear

cubic-bezier

Un tercer parámetro opcional de la propiedad transition es indicar una "función de transición" que nos permite seleccionar la velocidad durante la transición:

Elemento {
transition: [nombre de propiedad] [duración de la transición] [función de transición];
}

Los valores posibles que podemos especificar son:

ease : Define un efecto de transición con un comienzo lento, luego rápido y finalmente termina lento (cuando no definimos la función de transición elige esta por defecto)
linear : Define un efecto de transición con la misma velocidad de inicio a fin.
ease-in : Define un efecto de transición con un comienzo lento.
ease-out : Define un efecto de transición con un final lento.
ease-in-out : Define un efecto de transición con un comienzo lento y un final lento.

La sintaxis luego si queremos aplicar la función de transición linear será:

#recuadro2{
margin: 5px;
border-radius: 20px;
background-color:#eee;
width:200px;
padding:10px;
transition:width 2s linear;
-moz-transition:width 2s linear;
-ms-transition:width 2s linear;
-webkit-transition:width 2s linear;
-o-transition:width 2s linear;
}

ease

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,