Animaciones CSS
Animaciones CSS
¡CSS permite la animación de elementos HTML sin usar JavaScript o Flash!
En este capítulo aprenderá acerca de las siguientes propiedades:
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
Soporte de navegador para animaciones
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Property | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
¿Qué son las animaciones CSS?
Una animación permite que un elemento cambie gradualmente de un estilo a otro.
Puede cambiar tantas propiedades CSS como desee, tantas veces como desee.
Para usar la animación CSS, primero debe especificar algunos fotogramas clave para la animación.
Los fotogramas clave contienen los estilos que tendrá el elemento en determinados momentos.
La regla @keyframes
Cuando especifica estilos CSS dentro de la @keyframes
regla, la animación cambiará gradualmente del estilo actual al nuevo estilo en ciertos momentos.
Para que una animación funcione, debe vincular la animación a un elemento.
El siguiente ejemplo vincula la animación "example" al elemento <div>. La animación durará 4 segundos y cambiará gradualmente el color de fondo del elemento <div> de "rojo" a "amarillo":
Ejemplo
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Nota: La animation-durationpropiedad define cuánto tiempo debe tardar en completarse una animación. Si animation-durationno se especifica la propiedad, no se producirá ninguna animación, porque el valor predeterminado es 0s (0 segundos).
En el ejemplo anterior, hemos especificado cuándo cambiará el estilo usando las palabras clave "desde" y "hasta" (que representa 0 % (inicio) y 100 % (completado)).
También es posible utilizar porcentaje. Al usar el porcentaje, puede agregar tantos cambios de estilo como desee.
El siguiente ejemplo cambiará el color de fondo del elemento <div> cuando la animación esté completa en un 25 %, en un 50 % y nuevamente cuando la animación esté completa en un 100 %:
Ejemplo
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
El siguiente ejemplo cambiará tanto el color de fondo como la posición del elemento <div> cuando la animación esté completa en un 25 %, en un 50 % y nuevamente cuando la animación esté completa en un 100 %:
Ejemplo
/* The animation code */
@keyframes example
{
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Retrasar una animación
La animation-delaypropiedad especifica un retraso para el inicio de una animación.
El siguiente ejemplo tiene un retraso de 2 segundos antes de iniciar la animación:
Ejemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
También se permiten valores negativos. Si usa valores negativos, la animación comenzará como si ya se hubiera estado reproduciendo durante N segundos.
En el siguiente ejemplo, la animación comenzará como si ya se hubiera estado reproduciendo durante 2 segundos:
Ejemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
Establecer cuántas veces debe ejecutarse una animación
La animation-iteration-countpropiedad especifica el número de veces que debe ejecutarse una animación.
El siguiente ejemplo ejecutará la animación 3 veces antes de que se detenga:
Ejemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
El siguiente ejemplo usa el valor "infinito" para hacer que la animación continúe para siempre:
Ejemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
}
Ejecutar animación en dirección inversa o ciclos alternativos
La animation-directionpropiedad especifica si una animación debe reproducirse hacia adelante, hacia atrás o en ciclos alternos.
La propiedad animation-direction puede tener los siguientes valores:
normal- La animación se reproduce normalmente (hacia adelante). esto es por defectoreverse- La animación se reproduce en dirección inversa (hacia atrás)alternate- La animación se reproduce primero hacia delante y luego hacia atrás.alternate-reverse- La animación se reproduce primero hacia atrás y luego hacia adelante.
El siguiente ejemplo ejecutará la animación en dirección inversa (hacia atrás):
Ejemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction:
reverse;
}
El siguiente ejemplo usa el valor "alternate" para hacer que la animación se ejecute primero hacia adelante y luego hacia atrás:
Ejemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate;
}
El siguiente ejemplo usa el valor "alternativo-reverso" para hacer que la animación se ejecute primero hacia atrás y luego hacia adelante:
Ejemplo
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate-reverse;
}
Especificar la curva de velocidad de la animación
La animation-timing-functionpropiedad especifica la curva de velocidad de la animación.
La propiedad animation-timing-function puede tener los siguientes valores:
ease- Especifica una animación con un inicio lento, luego rápido, luego termina lentamente (esto es predeterminado)linear- Especifica una animación con la misma velocidad de principio a finease-in- Especifica una animación con un comienzo lentoease-out- Especifica una animación con un final lentoease-in-out- Especifica una animación con un comienzo y un final lentoscubic-bezier(n,n,n,n)- Le permite definir sus propios valores en una función cubic-bezier
El siguiente ejemplo muestra algunas de las diferentes curvas de velocidad que se pueden utilizar:
Ejemplo
#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;}
Especificar el modo de relleno para una animación
Las animaciones CSS no afectan a un elemento antes de que se reproduzca el primer fotograma clave o después de que se reproduzca el último fotograma clave. La propiedad animation-fill-mode puede anular este comportamiento.
La animation-fill-modepropiedad especifica un estilo para el elemento de destino cuando la animación no se está reproduciendo (antes de que comience, después de que finalice o ambos).
La propiedad animation-fill-mode puede tener los siguientes valores:
none- Valor por defecto. La animación no aplicará ningún estilo al elemento antes o después de que se ejecuteforwards- El elemento conservará los valores de estilo establecidos por el último fotograma clave (depende de la dirección de la animación y el número de iteraciones de la animación)backwards- El elemento obtendrá los valores de estilo establecidos por el primer fotograma clave (depende de la dirección de la animación) y los conservará durante el período de retraso de la animación.both- La animación seguirá las reglas tanto para adelante como para atrás, extendiendo las propiedades de animación en ambas direcciones
El siguiente ejemplo permite que el elemento <div> conserve los valores de estilo del último fotograma clave cuando finaliza la animación:
Ejemplo
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
El siguiente ejemplo permite que el elemento <div> obtenga los valores de estilo establecidos por el primer fotograma clave antes de que comience la animación (durante el período de retraso de la animación):
Ejemplo
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
El siguiente ejemplo permite que el elemento <div> obtenga los valores de estilo establecidos por el primer fotograma clave antes de que comience la animación y retiene los valores de estilo del último fotograma clave cuando finaliza la animación:
Ejemplo
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
Propiedad abreviada de animación
El siguiente ejemplo utiliza seis de las propiedades de animación:
Ejemplo
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
El mismo efecto de animación que el anterior se puede lograr usando la
animationpropiedad abreviada:
Ejemplo
div
{
animation: example 5s linear 2s infinite alternate;
}
Propiedades de animación CSS
La siguiente tabla enumera la regla @keyframes y todas las propiedades de animación CSS:
| Property | Description |
|---|---|
| @keyframes | Specifies the animation code |
| animation | A shorthand property for setting all the animation properties |
| animation-delay | Specifies a delay for the start of an animation |
| animation-direction | Specifies whether an animation should be played forwards, backwards or in alternate cycles |
| animation-duration | Specifies how long time an animation should take to complete one cycle |
| animation-fill-mode | Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
| animation-iteration-count | Specifies the number of times an animation should be played |
| animation-name | Specifies the name of the @keyframes animation |
| animation-play-state | Specifies whether the animation is running or paused |
| animation-timing-function | Specifies the speed curve of the animation |