Animaciones CSS permiten animar las transiciones de una configuración de estilo CSS a otra. Las animaciones constan de dos componentes, un estilo que describe la animación CSS y un conjunto de fotogramas clave que indican los estados de inicio y finalización del estilo de la animación, así como posibles puntos intermedios.

Hay tres ventajas clave de las animaciones CSS sobre las técnicas de animación tradicionales basadas en secuencias de comandos:

  1. Son fáciles de usar para animaciones simples; puede crearlos sin siquiera tener que saber JavaScript.
  2. Las animaciones funcionan bien, incluso con una carga moderada del sistema. Las animaciones simples a menudo pueden funcionar mal en JavaScript. El motor de renderizado puede utilizar saltos de fotogramas y otras técnicas para mantener el rendimiento lo más fluido posible.
  3. Dejar que el navegador controle la secuencia de animación permite que el navegador optimice el rendimiento y la eficiencia, por ejemplo, reduciendo la frecuencia de actualización de las animaciones que se ejecutan en pestañas que no están visibles actualmente.

Configurando la animación

Para crear una secuencia de animación CSS, diseñe el elemento que desea animar con el animation propiedad o sus subpropiedades. Esto le permite configurar el tiempo, la duración y otros detalles de cómo debe progresar la secuencia de animación. Esto hace no configurar la apariencia real de la animación, que se realiza utilizando el @keyframes at-rule como se describe en Definición de la secuencia de animación usando fotogramas clave a continuación.

Las subpropiedades del animation propiedad son:

animation-name
Especifica el nombre del @keyframes at-rule que describe los fotogramas clave de la animación.
animation-duration
Configura el tiempo que debe tardar una animación en completar un ciclo.
animation-timing-function
Configura el tiempo de la animación; es decir, cómo la animación pasa por fotogramas clave, estableciendo curvas de aceleración.
animation-delay
Configura el retraso entre el momento en que se carga el elemento y el comienzo de la secuencia de animación.
animation-iteration-count
Configura el número de veces que debe repetirse la animación; puedes especificar infinite para repetir la animación indefinidamente.
animation-direction
Configura si la animación debe alternar la dirección en cada ejecución a través de la secuencia o restablecerse al punto de inicio y repetirse.
animation-fill-mode
Configura qué valores aplica la animación antes y después de su ejecución.
animation-play-state
Le permite pausar y reanudar la secuencia de animación.

Definición de la secuencia de animación mediante fotogramas clave

Una vez que haya configurado el tiempo de la animación, debe definir la apariencia de la animación. Esto se hace estableciendo dos o más fotogramas clave usando el @keyframes en regla. Cada fotograma clave describe cómo se debe representar el elemento animado en un momento dado durante la secuencia de animación.

Dado que el tiempo de la animación se define en el estilo CSS que configura la animación, los fotogramas clave utilizan un para indicar el tiempo durante la secuencia de animación en el que tienen lugar. 0% indica el primer momento de la secuencia de animación, mientras que 100% indica el estado final de la animación. Debido a que estos dos tiempos son tan importantes, tienen alias especiales: from y to. Ambos son opcionales. Si from/0% o to/100% no se especifica, el navegador inicia o finaliza la animación utilizando los valores calculados de todos los atributos.

Opcionalmente, puede incluir fotogramas clave adicionales que describan pasos intermedios entre el inicio y el final de la animación.

Ejemplos de

Nota: Algunos navegadores más antiguos (anteriores a 2017) pueden necesitar prefijos; los ejemplos en vivo que puede hacer clic para ver en su navegador incluyen el -webkit sintaxis prefijada.

Hacer que el texto se deslice por la ventana del navegador

Este simple ejemplo diseña el

elemento para que el texto se deslice desde el borde derecho de la ventana del navegador.

Tenga en cuenta que animaciones como esta pueden hacer que la página se vuelva más ancha que la ventana del navegador. Para evitar este problema, coloque el elemento a animar en un contenedor y configure overflow:hidden en el contenedor.

panimation-duration: 3s;animation-name: slidein;@keyframes slideinfrommargin-left: 100%;width: 300%;tomargin-left: 0%;width: 100%;

En este ejemplo, el estilo para el

El elemento especifica que la animación debería tardar 3 segundos en ejecutarse de principio a fin, utilizando el animation-duration propiedad, y que el nombre de la @keyframes La regla at que define los fotogramas clave para la secuencia de animación se denomina “slidein”.

Si quisiéramos un estilo personalizado en el

elemento para aparecer en navegadores que no admiten animaciones CSS, también lo incluiríamos aquí; sin embargo, en este caso no queremos ningún estilo personalizado que no sea el efecto de animación.

Los fotogramas clave se definen mediante el @keyframes en regla. En este caso, solo tenemos dos fotogramas clave. El primero ocurre al 0% (usando el alias from). Aquí, configuramos el margen izquierdo del elemento al 100% (es decir, en el extremo derecho del elemento contenedor), y el ancho del elemento al 300% (o tres veces el ancho del elemento contenedor). ). Esto hace que el encabezado del primer fotograma de la animación se extraiga del borde derecho de la ventana del navegador.

El segundo (y último) fotograma clave ocurre al 100% (usando el alias to). El margen izquierdo se establece en 0% y el ancho del elemento se establece en 100%. Esto hace que el encabezado termine su animación alineada con el borde izquierdo del área de contenido.

<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.p>

Nota: Vuelva a cargar la página para ver la animación o haga clic en el botón CodePen para ver la animación en el entorno de CodePen.

Agregar otro fotograma clave

Agreguemos otro fotograma clave a la animación del ejemplo anterior. Digamos que queremos que el tamaño de la fuente del encabezado aumente a medida que se mueve de derecha a izquierda durante un tiempo, y luego que disminuya a su tamaño original. Eso es tan simple como agregar este fotograma clave:

75%font-size: 300%;margin-left: 25%;width: 150%;

El código completo ahora se ve así:

panimation-duration: 3s;animation-name: slidein;@keyframes slideinfrommargin-left: 100%;width: 300%;75%font-size: 300%;margin-left: 25%;width: 150%;tomargin-left: 0%;width: 100%;
<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.p>

Esto le dice al navegador que el 75% del camino a través de la secuencia de animación, el encabezado debe tener su margen izquierdo al 25% y el ancho debe ser 150%.

Nota: Vuelva a cargar la página para ver la animación o haga clic en el botón CodePen para ver la animación en el entorno de CodePen.

Haciendo que se repita

Para hacer que la animación se repita, use el animation-iteration-count propiedad para indicar cuántas veces se debe repetir la animación. En este caso, usemos infinite para que la animación se repita indefinidamente:

panimation-duration: 3s;animation-name: slidein;animation-iteration-count: infinite;

Agregándolo al código existente:

@keyframes slideinfrommargin-left: 100%;width: 300%;tomargin-left: 0%;width: 100%;
<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.p>

Haciendo que se mueva hacia adelante y hacia atrás

Eso hizo que se repitiera, pero es muy extraño que salte al principio cada vez que comienza a animarse. Lo que realmente queremos es que se mueva hacia adelante y hacia atrás en la pantalla. Eso se logra fácilmente configurando animation-direction para alternate:

panimation-duration: 3s;animation-name: slidein;animation-iteration-count: infinite;animation-direction: alternate;

Y el resto del código:

@keyframes slideinfrommargin-left: 100%;width: 300%;tomargin-left: 0%;width: 100%;
<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.p>

Usando taquigrafía de animación

los animation La taquigrafía es útil para ahorrar espacio. Como ejemplo, la regla que hemos estado usando a lo largo de este artículo:

panimation-duration: 3s;animation-name: slidein;animation-iteration-count: infinite;animation-direction: alternate;

Podría ser reemplazado por

panimation: 3s infinite alternate slidein;

Nota: Puede encontrar más detalles en el animation página de referencia:

Establecer múltiples valores de propiedad de animación

Los valores a mano de la animación CSS pueden aceptar varios valores, separados por comas; esta función se puede utilizar cuando desee aplicar varias animaciones en una sola regla y establecer duraciones, recuentos de iteraciones, etc. independientes para las diferentes animaciones. Veamos algunos ejemplos rápidos para explicar las diferentes permutaciones:

En este primer ejemplo, tenemos tres nombres de animación establecidos, pero solo una duración y un recuento de iteraciones. En este caso, a las tres animaciones se les da la misma duración y conteo de iteraciones:

animation-name: fadeInOut, moveLeft300px, bounce;animation-duration: 3s;animation-iteration-count: 1;

En este segundo ejemplo, tenemos tres valores establecidos en las tres propiedades. En este caso, cada animación se ejecuta con los valores correspondientes en la misma posición en cada propiedad, por ejemplo fadeInOut tiene una duración de 2,5 sy un recuento de iteraciones de 2, etc.

animation-name: fadeInOut, moveLeft300px, bounce;animation-duration: 2.5s, 5s, 1s;animation-iteration-count: 2, 1, 5;

En este tercer caso, hay tres animaciones especificadas, pero solo dos duraciones y recuentos de iteraciones. En los casos en los que no hay suficientes valores para dar un valor separado a cada animación, los valores van de principio a fin. Entonces, por ejemplo, fadeInOut obtiene una duración de 2.5s y moveLeft300px obtiene una duración de 5s. Ahora hemos llegado al final de los valores de duración disponibles, por lo que volvemos a empezar desde el principio; por lo tanto, el rebote tiene una duración de 2,5 segundos. Los recuentos de iteraciones (y cualquier otro valor de propiedad que especifique) se asignarán de la misma manera.

animation-name: fadeInOut, moveLeft300px, bounce;animation-duration: 2.5s, 5s;animation-iteration-count: 2, 1;

Usar eventos de animación

Puede obtener un control adicional sobre las animaciones, así como información útil sobre ellas, haciendo uso de eventos de animación. Estos eventos, representados por el AnimationEvent objeto, se puede utilizar para detectar cuando las animaciones comienzan, terminan y comienzan una nueva iteración. Cada evento incluye la hora a la que ocurrió, así como el nombre de la animación que desencadenó el evento.

Modificaremos el ejemplo de texto deslizante para generar información sobre cada evento de animación cuando ocurra, para que podamos ver cómo funcionan.

Añadiendo el CSS

Comenzamos creando el CSS para la animación. Esta animación tendrá una duración de 3 segundos, se llamará “deslizamiento”, se repetirá 3 veces y alternará la dirección cada vez. En el @keyframes, el ancho y el margen izquierdo se manipulan para hacer que el elemento se deslice por la pantalla.

.slideinanimation-duration: 3s;animation-name: slidein;animation-iteration-count: 3;animation-direction: alternate;@keyframes slideinfrommargin-left:100%;width:300%
  tomargin-left:0%;width:100%;

Agregar los oyentes de eventos de animación

Usaremos código JavaScript para escuchar los tres posibles eventos de animación. Este código configura nuestros oyentes de eventos; lo llamamos cuando el documento se carga por primera vez para configurar las cosas.

var element = document.getElementById("watchme");
element.addEventListener("animationstart", listener,false);
element.addEventListener("animationend", listener,false);
element.addEventListener("animationiteration", listener,false);

element.className ="slidein";

Este es un código bastante estándar; puede obtener detalles sobre cómo funciona en la documentación para eventTarget.addEventListener(). Lo último que hace este código es configurar el class en el elemento que animaremos a “slidein”; hacemos esto para iniciar la animación.

¿Por qué? Porque el animationstart El evento se activa tan pronto como comienza la animación y, en nuestro caso, eso sucede antes de que se ejecute nuestro código. Entonces, comenzaremos la animación nosotros mismos estableciendo la clase del elemento en el estilo que se anima después del hecho.

Recibiendo los eventos

Los eventos se entregan al listener() función, que se muestra a continuación.

functionlistener(event)var l = document.createElement("li");switch(event.type)case"animationstart":
      l.textContent =`Started: elapsed time is $event.elapsedTime`;break;case"animationend":
      l.textContent =`Ended: elapsed time is $event.elapsedTime`;break;case"animationiteration":
      l.textContent =`New loop started at time $event.elapsedTime`;break;
  document.getElementById("output").appendChild(l);

Este código también es muy simple. Mira el event.type para determinar qué tipo de evento de animación ocurrió, luego agrega una nota apropiada al

    (lista desordenada) que estamos usando para registrar estos eventos.

    La salida, cuando todo está dicho y hecho, parece algo como esto:

    • Iniciado: el tiempo transcurrido es 0
    • El nuevo ciclo comenzó a la hora 3.01200008392334
    • El nuevo ciclo comenzó a la hora 6.00600004196167
    • Finalizado: el tiempo transcurrido es 9.234000205993652

    Tenga en cuenta que los tiempos son muy cercanos, pero no exactamente, a los esperados dado el tiempo establecido cuando se configuró la animación. Tenga en cuenta también que después de la iteración final de la animación, el animationiteration el evento no se envía; en cambio, el animationend se envía el evento.

    El HTML

    En aras de la exhaustividad, aquí está el HTML que muestra el contenido de la página, incluida la lista en la que el script inserta información sobre los eventos recibidos:

    <h1id="watchme">Watch me moveh1><p>
  This example shows how to use CSS animations to make <code>H1code>
  elements move across the page.
p><p>
  In addition, we output some text each time an animation event fires,
  so you can see them in action.
p><ulid="output">ul>

    Y aquí está la salida en vivo.

    Nota: Vuelva a cargar la página para ver la animación o haga clic en el botón CodePen para ver la animación en el entorno de CodePen.

    Ver también

    • AnimationEvent
    • Detección de soporte de animación CSS
    • Usando transiciones CSS