Animaciones CSS
CSS permite la animación de elementos HTML sin usar JavaScript o Flash.
CSS
En este capítulo aprenderá sobre las siguientes propiedades:
@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Propiedad | |||||
---|---|---|---|---|---|
@keyframes | 43,0 | 10.0 | 16,0 | 9.0 | 30,0 |
animación-nombre | 43,0 | 10.0 | 16,0 | 9.0 | 30,0 |
duración de la animación | 43,0 | 10.0 | 16,0 | 9.0 | 30,0 |
retardo de animación | 43,0 | 10.0 | 16,0 | 9.0 | 30,0 |
recuento de iteraciones de animación | 43,0 | 10.0 | 16,0 | 9.0 | 30,0 |
dirección de animación | 43,0 | 10.0 | 16,0 | 9.0 | 30,0 |
función de temporización de animación | 43,0 | 10.0 | 16,0 | 9.0 | 30,0 |
modo de relleno de animación | 43,0 | 10.0 | 16,0 | 9.0 | 30,0 |
animación | 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 utilizar 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 del @keyframes
regla, la animación cambiará gradualmente del estilo actual al nuevo estilo en determinados momentos.
Para que una animación funcione, debe vincular la animación a un elemento.
El siguiente ejemplo vincula la animación «ejemplo» al elemento
Ejemplo
/ * El código de animación * /
Ejemplo de @keyframes {
de {background-color: red;}
a {background-color: yellow;}
}
/ * El elemento al que aplicar la animación * /
div {
ancho: 100px;
altura: 100px;
color de fondo: rojo;
nombre-animación: ejemplo;
duración de la animación: 4 s;
}
Inténtalo tú mismo »
Nota: los animation-duration
La propiedad define cuánto tiempo debe tardar una animación en completarse. Si el animation-duration
no 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 utilizando las palabras clave «desde» y «hasta» (que representa 0% (inicio) y 100% (completo)).
También es posible utilizar el porcentaje. Al usar el porcentaje, puede agregar tantos cambios de estilo como desee.
El siguiente ejemplo cambiará el color de fondo del elemento
Ejemplo
/ * El código de animación * /
Ejemplo de @keyframes {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/ * El elemento al que aplicar la animación * /
div {
ancho: 100px;
altura: 100px;
color de fondo: rojo;
nombre-animación: ejemplo;
duración de la animación: 4 s;
}
Inténtalo tú mismo »
El siguiente ejemplo cambiará tanto el color de fondo como la posición del elemento
Ejemplo
/ * El código de animación * /
Ejemplo de @keyframes {
0% {color de fondo: rojo; izquierda: 0px; arriba: 0px;}
25% {color de fondo: amarillo; izquierda: 200px; arriba: 0px;}
50% {color de fondo: azul; izquierda: 200px; arriba: 200px;}
75% {color de fondo: verde; izquierda: 0px; arriba: 200px;}
100% {color de fondo: rojo; izquierda: 0px; arriba: 0px;}
}
/ * El elemento al que aplicar la animación * /
div {
ancho: 100px;
altura: 100px;
posición: relativa;
color de fondo: rojo;
nombre-animación: ejemplo;
duración de la animación: 4 s;
}
Inténtalo tú mismo »
Retrasar una animación
los animation-delay
La propiedad 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 {
ancho: 100px;
altura: 100px;
posición: relativa;
color de fondo: rojo;
nombre-animación: ejemplo;
duración de la animación: 4 s;
retardo de animación: 2 s;
}
Inténtalo tú mismo »
También se permiten valores negativos. Si usa valores negativos, la animación comenzará como si ya se hubiera estado reproduciendo durante norte segundos.
En el siguiente ejemplo, la animación comenzará como si ya se hubiera estado reproduciendo durante 2 segundos:
Ejemplo
div {
ancho: 100px;
altura: 100px;
posición: relativa;
color de fondo: rojo;
nombre-animación: ejemplo;
duración de la animación: 4 s;
retardo de animación: -2s;
}
Inténtalo tú mismo »
Establecer cuántas veces debe ejecutarse una animación
los animation-iteration-count
La propiedad 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 {
ancho: 100px;
altura: 100px;
posición: relativa;
color de fondo: rojo;
nombre-animación: ejemplo;
duración de la animación: 4 s;
recuento de iteraciones de animación: 3;
}
Inténtalo tú mismo »
El siguiente ejemplo usa el valor «infinito» para que la animación continúe para siempre:
Ejemplo
div {
ancho: 100px;
altura: 100px;
posición: relativa;
color de fondo: rojo;
nombre-animación: ejemplo;
duración de la animación: 4 s;
recuento de iteraciones de animación: infinito;
}
Inténtalo tú mismo »
Ejecutar animación en dirección inversa o ciclos alternativos
los animation-direction
La propiedad especifica si una animación debe reproducirse hacia adelante, hacia atrás o en ciclos alternativos.
La propiedad animation-direction puede tener los siguientes valores:
normal
– La animación se reproduce normalmente (hacia delante). Esto es predeterminadoreverse
– La animación se reproduce en sentido inverso (al revés)alternate
– La animación se reproduce primero hacia adelante y luego hacia atrásalternate-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 {
ancho: 100px;
altura: 100px;
posición: relativa;
color de fondo: rojo;
nombre-animación: ejemplo;
duración de la animación: 4 s;
dirección de animación: inversa;
}
Inténtalo tú mismo »
El siguiente ejemplo usa el valor «alternativo» para hacer que la animación se ejecute primero hacia adelante y luego hacia atrás:
Ejemplo
div {
ancho: 100px;
altura: 100px;
posición: relativa;
color de fondo: rojo;
nombre-animación: ejemplo;
duración de la animación: 4 s;
recuento de iteraciones de animación: 2;
animación-dirección: alternativa;
}
Inténtalo tú mismo »
El siguiente ejemplo usa el valor «alternate-reverse» para hacer que la animación se ejecute primero hacia atrás y luego hacia adelante:
Ejemplo
div {
ancho: 100px;
altura: 100px;
posición: relativa;
color de fondo: rojo;
nombre-animación: ejemplo;
duración de la animación: 4 s;
recuento de iteraciones de animación: 2;
animación-dirección: alternativa-inversa;
}
Inténtalo tú mismo »
Especificar la curva de velocidad de la animación
los animation-timing-function
propiedad 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 inicio lento.ease-out
– Especifica una animación con un final lento.ease-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 {función-tiempo-animación: lineal;}
# div2 {función de tiempo de animación: facilidad;}
# div3 {función de tiempo de animación: facilidad de entrada;}
# div4 {función de tiempo de animación: salida fácil;}
# div5 {función-de-tiempo-de-animación: facilidad-entrada-salida;}
Inténtalo tú mismo »
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.
los animation-fill-mode
La propiedad especifica un estilo para el elemento de destino cuando la animación no se está reproduciendo (antes de que comience, después de que termine 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 su ejecución.forwards
– El elemento conservará los valores de estilo establecidos por el último fotograma clave (depende de la dirección de la animación y el recuento 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 hacia adelante como hacia atrás, extendiendo las propiedades de la animación en ambas direcciones
El siguiente ejemplo permite que el elemento
Ejemplo
div {
ancho: 100px;
altura: 100px;
fondo: rojo;
posición: relativa;
nombre-animación: ejemplo;
duración de la animación: 3 s;
modo de relleno de animación: adelante;
}
Inténtalo tú mismo »
El siguiente ejemplo permite que el elemento
Ejemplo
div {
ancho: 100px;
altura: 100px;
fondo: rojo;
posición: relativa;
nombre-animación: ejemplo;
duración de la animación: 3 s;
retardo de animación: 2 s;
modo de relleno de animación: al revés;
}
Inténtalo tú mismo »
El siguiente ejemplo permite que el elemento
Ejemplo
div {
ancho: 100px;
altura: 100px;
fondo: rojo;
posición: relativa;
nombre-animación: ejemplo;
duración de la animación: 3 s;
retardo de animación: 2 s;
modo de relleno de animación: ambos;
}
Inténtalo tú mismo »
Propiedad de taquigrafía de animación
El siguiente ejemplo utiliza seis de las propiedades de animación:
Ejemplo
div {
nombre-animación: ejemplo;
duración de la animación: 5 s;
función de temporización de animación: lineal;
retardo de animación: 2 s;
recuento de iteraciones de animación: infinito;
animación-dirección: alternativa;
}
Inténtalo tú mismo »
El mismo efecto de animación que el anterior se puede lograr utilizando la abreviatura
animation
propiedad:
¡Ponte a prueba con ejercicios!
Propiedades de animación CSS
La siguiente tabla enumera la regla @keyframes y todas las propiedades de animación CSS: