Saltar al contenido

Animaciones CSS

septiembre 23, 2021

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

Soporte del navegador para animaciones

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

. La animación durará 4 segundos y gradualmente cambiará el color de fondo del elemento
de «rojo» a «amarillo»:

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

cuando la animación esté completa al 25%, al 50% y nuevamente cuando la animación esté completa al 100%:

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

cuando la animación esté completa al 25%, al 50% y nuevamente cuando la animación esté completa al 100%:

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 predeterminado
  • reverse – La animación se reproduce en sentido inverso (al revés)
  • alternate – La animación se reproduce primero hacia adelante 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 {

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 fin
  • ease-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 lentos
  • cubic-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

retenga los valores de estilo del último fotograma clave cuando finaliza la animación:

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

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 {
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

obtenga los valores de estilo establecidos por el primer fotograma clave antes de que comience la animación y retenga los valores de estilo del último fotograma clave cuando finaliza la animación:

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:

close