CSS Animaciones con la propiedad de transición.


Ejemplo

Útil para animaciones simples, la propiedad de transition CSS permite que las propiedades CSS basadas en números se animen entre estados.


Ejemplo

.Example{
    height: 100px;
    background: #fff;
}

.Example:hover{
    height: 120px;
    background: #ff0000;
}

Ver resultado

De forma predeterminada, al pasar el cursor sobre un elemento con la clase .Example , la altura del elemento saltará a 120px y el color de fondo a rojo ( #ff0000 ).

Al agregar la propiedad de transition , podemos hacer que estos cambios ocurran con el tiempo:

.Example{
    ...
    transition: all 400ms ease;
}

Ver resultado

all valor aplica la transición a todas las propiedades compatibles (basadas en números). Cualquier nombre de propiedad compatible (como height o top ) puede sustituirse por esta palabra clave.

400ms especifica la cantidad de tiempo que tarda la transición. En este caso, el cambio de altura del elemento tardará 400 milisegundos en completarse.

Finalmente, la ease valor es la función de animación, que determina cómo se reproduce la animación. ease significa comenzar lento, acelerar, luego terminar lento nuevamente. Otros valores son linear , de ease-out y de ease-in .


Compatibilidad entre navegadores

La propiedad de transition general está bien soportada en todos los navegadores principales, excepto en IE 9. Para versiones anteriores de Firefox y navegadores basados ​​en Webkit, use los prefijos de los proveedores, como por ejemplo:

.Example{
    transition:         all 400ms ease;
    -moz-transition:    all 400ms ease;
    -webkit-transition: all 400ms ease;
}

Nota: La propiedad de transition puede animar cambios entre dos valores numéricos cualquiera, independientemente de la unidad. También puede pasar entre las unidades, tal como 100px a 50vh . Sin embargo, no puede realizar la transición entre un número y un valor predeterminado o automático, como la transición de la altura de un elemento de 100px a auto .