Tutorial de animaciones CSS: guía completa para principiantes

Esta es una guía de sintaxis completa y un tutorial interactivo de animaciones CSS para principiantes. Úselo como referencia para aprender las diferentes partes de la especificación de animaciones CSS.

El rendimiento del navegador ha avanzado mucho en los últimos 10 años. Solía ​​​​ser mucho más desafiante agregar animaciones interactivas a las páginas web debido a la posibilidad de problemas de representación y rendimiento. Pero hoy en día, las animaciones CSS se pueden usar mucho más libremente y la sintaxis generalmente es mucho más fácil de aprender en comparación con las funciones CSS como grid o flexbox.

Hay diferentes funciones que forman parte de la especificación de animación CSS del W3C. Algunos más fáciles de usar que otros. Este tutorial de animaciones de fotogramas clave CSS repasará toda la sintaxis, incluidas cada una de las diferentes propiedades. Incluiré demostraciones interactivas para ayudarlo a comprender lo que es posible con las animaciones CSS.

La sintaxis de @keyframes

Cada animación CSS tiene dos partes: una o más animation-* propiedades junto con un conjunto de fotogramas clave de animación que se definen mediante el @keyframes en-regla. Echemos un vistazo en detalle a lo que implica construir un @keyframes conjunto de reglas

La sintaxis se ve así:

@keyframes moveObject {
  0% {
    transform: translateX(0);
  }

  50% {
     transform: translateX(300px);
  }

  100% {
    transform: translateX(300px) scale(1.5);
  }
}

Como se muestra aquí, el @keyframes La regla at incluye tres partes básicas:

• Él @keyframes regla seguida de un nombre de animación personalizado
• Un conjunto de llaves que envuelven todos los fotogramas clave
• Uno o más fotogramas clave, cada uno con un porcentaje seguido de un conjunto de reglas rodeado de llaves

En este primer ejemplo de nuestro tutorial de animaciones CSS, he definido mi animación con el nombre moveObject. Este puede ser cualquier nombre que desee, distingue entre mayúsculas y minúsculas y debe cumplir con el identificador personalizado reglas en CSS. Este nombre personalizado debe coincidir con el nombre utilizado en el animation-name propiedad (discutido más adelante).

En mi ejemplo, notará que usé porcentajes para definir cada uno de los fotogramas clave en mi animación. Si mi animación incluye fotogramas clave que equivalen 0% y 100%alternativamente puedo usar el from y to palabras clave:

@keyframes moveObject {
  from {
    transform: translateX(0);
  }

  50% {
     transform: translateX(300px);
  }

  to {
    transform: translateX(300px) scale(1.5);
  }
}

El siguiente CodePen interactivo usa la sintaxis anterior en un ejemplo en vivo:

En la demostración, he incluido un botón que restablece la animación. Explicaré más adelante por qué es necesario. Pero por ahora, sepa que esta animación incluye tres fotogramas clave que representan pasos en esta secuencia de animación: el inicio, el paso del 50 % y el final (es decir, 0 %, 50 % y 100 %). Cada uno de estos utiliza lo que se denomina un selector de fotogramas clave junto con llaves para definir las propiedades en ese paso.

Algunas cosas a tener en cuenta sobre el @keyframes sintaxis:

• Puede colocar los conjuntos de reglas de fotogramas clave en el orden que desee, y el navegador aún los ejecutará en el orden determinado por su porcentaje
• Puede omitir los fotogramas clave 0% y 100% y el navegador los determinará automáticamente según los estilos existentes en el elemento que se está animando.
• Si hay fotogramas clave duplicados con diferentes conjuntos de reglas (por ejemplo, dos fotogramas clave para el 20 % con un valor de transformación diferente), el navegador usa el último
• Puede definir varios fotogramas clave en un único selector de fotogramas clave con una coma: 10%, 30% { ... }
• Él !important La palabra clave anula cualquier valor de propiedad, por lo que no debe usarse en una propiedad dentro de un conjunto de reglas de fotogramas clave

👉 Ahora que tiene una buena comprensión de la @keyframes sintaxis en este tutorial de animación CSS, echemos un vistazo a las diferentes propiedades de animación que se definen en el elemento que se está animando.

Las propiedades de animación que vamos a cubrir:

La propiedad del nombre de la animación

Como se mencionó, cada animación CSS que cree debe tener un nombre que aparezca en el @keyframes sintaxis. Este nombre tiene que ser el mismo nombre definido usando el animation-name propiedad.

Usando el CSS de la demostración anterior, la sintaxis se ve así:

.box {
  animation-name: moveObject;
}

Una vez más, el nombre personalizado que he definido también debe existir como nombre para un @keyframes regla at — de lo contrario, este nombre no hará nada. Puedes pensar en esto como un Llamada de función en JavaScript. La función en sí sería la @keyframes moveObject {} parte del código, mientras que la llamada a la función es animation-name: moveObject.

Algunas cosas a tener en cuenta sobre animation-name:

• El valor inicial para animation-name es none, lo que significa que no hay fotogramas clave activos. Esto se puede usar como una especie de ‘alternar’ para desactivar una animación.
• El nombre elegido distingue entre mayúsculas y minúsculas y puede incluir letras, números, guiones bajos y guiones.
• El primer carácter del nombre debe ser una letra o un guión, pero solo un guión.
• El nombre no puede ser una palabra reservada como unset, initialo inherit.

La propiedad de duración de la animación

Él animation-duration La propiedad, sin sorpresa, define la cantidad de tiempo que tarda una animación en ejecutarse una vez de principio a fin. Este valor se puede especificar en segundos o milisegundos, como se muestra a continuación:

.box {
  animation-duration: 2s;
}

Lo anterior sería el equivalente a lo siguiente:

.box {
  animation-duration: 2000ms;
}

Puedes ver el animation-duration propiedad en acción en la siguiente demostración de CodePen. En esta demostración, puede elegir cuánto tiempo desea que dure la animación. Intente ingresar varios valores en segundos o milisegundos, luego use el botón “Animar el cuadro” para ejecutar la animación.

Si usa un número pequeño junto con ms para la unidad, es posible que ni siquiera note ningún movimiento. Intente configurar un número más alto si está usando milisegundos.

Algunas notas sobre el uso animation-duration:

• Los valores negativos no son válidos
• La unidad debe incluirse, incluso si la duración se establece en 0s (el valor inicial)
• Puede utilizar valores fraccionarios (p. ej., 0.8s)

La propiedad animation-timing-function

Él animation-timing-function, que no es tan obvio en su significado como las dos propiedades anteriores, se usa para definir la forma en que progresa la animación CSS. Puede que esa no sea la explicación más clara, pero la sintaxis puede ayudar a aclarar.

La declaración se ve así:

.box {
  animation-timing-function: linear;
}

Esta propiedad acepta los siguientes valores de palabra clave:

• ease (el valor inicial)
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end

La mayoría de los valores son relativamente fáciles de comprender por sus nombres, pero puede ver cómo difieren utilizando la siguiente demostración interactiva:

Utilice la entrada de selección para elegir uno de los siete valores de palabra clave. Tenga en cuenta que el ease-* Los valores ‘facilitan’ la animación de varias maneras. Un valor lineal es consistente en todo el camino.

Él animation-timing-function La propiedad también acepta las siguientes funciones:

• cubic-bezier() – Acepta como argumentos cuatro valores numéricos, separados por comas
• steps() – Acepta como argumentos dos valores, un número y un “término de salto”, separados por una coma

Los valores de las palabras clave step-start y step-end son equivalentes a los valores steps(1, jump-start) y steps(1, jump-end)respectivamente.

Como para cubic-bezier()la siguiente demostración interactiva puede ayudarlo a comprender un poco mejor la función:

Observe que la demostración le permite establecer los cuatro argumentos en el cubic-bezier() función. Dos de los argumentos pueden ser negativos y dos están restringidos a valores decimales entre 0 y 1. Para obtener una explicación decente de cómo funcionan estos tipos de funciones de tiempo, puede consultar Este artículo o esta herramienta interactiva.

Él steps() La función, por otro lado, acepta dos argumentos:

• Un número entero que representa “paradas” iguales a lo largo de un solo ciclo de la animación.
• Una palabra clave opcional llamada “jumpterm” que determina si la animación “se mantiene” en intervalos específicos

Nuevamente, una demostración interactiva debería ayudarlo a comprender cómo funcionan estos términos de salto:

Intente seleccionar un número entero junto con un término de salto (o pruébelo sin término de salto) para ver cómo las diferentes palabras clave difieren con diferentes valores enteros. Aparentemente, se permiten enteros negativos, pero no veo ninguna diferencia entre 0 y cualquier valor negativo.

La propiedad animation-iteration-count

En algunos casos, estará contento si una animación se ejecuta una vez, pero a veces desea que una animación se ejecute varias veces. Él animation-iteration-count La propiedad le permite hacer esto aceptando un número positivo que representa la cantidad de veces que desea que se ejecute la animación:

.box {
  animation-iteration-count: 3;
}

El valor inicial para animation-iteration-count es 1 pero también puedes usar la palabra clave infinite (se explica por sí mismo) o utilizar un valor fraccionario. Un valor fraccionario ejecutará la animación parcialmente en la ejecución fraccionaria:

.box {
  animation-iteration-count: 3.5;
}

El código anterior se ejecuta a través de la animación tres veces y media. Es decir, tres iteraciones completas seguidas de una iteración final que se detiene exactamente a la mitad.

Esta propiedad es más útil cuando se usa junto con el animation-direction propiedad (discutida a continuación), porque una animación que se ejecuta desde el principio no es extremadamente útil si se ejecuta más de una vez.

Puede probar la demostración a continuación que le permite seleccionar un valor fraccionario para el recuento de iteraciones, para que pueda ver el efecto:

La propiedad de dirección de animación

Como se mencionó anteriormente en este tutorial de animaciones CSS, el animation-direction propiedad funciona muy bien en conjunto con animation-iteration-count. Él animation-direction La propiedad le permite definir en qué dirección desea que se reproduzca la animación. La sintaxis se ve así:

.box {
  animation-direction: alternate;
}

Puede establecer el valor como una de cuatro palabras clave:

• normal – La animación se reproduce hacia adelante en la primera iteración (el valor predeterminado)
• reverse – La animación se reproduce hacia atrás en la primera iteración
• alternate – La animación se reproduce hacia adelante en la primera iteración y luego se alterna en iteraciones posteriores
• alternate-reverse – Igual que alternate pero se reproduce al revés en la primera iteración

Puede probar los diferentes valores con diferentes recuentos de iteraciones utilizando la demostración interactiva a continuación:

La propiedad animation-play-state

Él animation-play-state La propiedad no es extremadamente útil en un entorno CSS estático, pero puede ser útil al escribir animaciones que son interactivas a través de JavaScript o incluso CSS.

Esta propiedad acepta dos valores: running o paused:

.box {
  animation-direction: paused;
}

De forma predeterminada, cualquier animación dada está en el estado “en ejecución”. Pero puede usar JavaScript para alternar el valor de la propiedad. Incluso podría usar una función CSS interactiva como :hover o :focus para cambiar la animación a un estado de “pausa”, que esencialmente congela la animación donde sea que esté en la iteración actual.

La demostración interactiva a continuación tiene una animación que se ejecuta infinitamente con dos botones para “pausar” y “reanudar” la animación.

La propiedad de retraso de animación

Algunas animaciones están diseñadas para comenzar a animar de inmediato, mientras que otras podrían beneficiarse de un ligero retraso antes de la primera iteración. Él animation-delay propiedad le permite lograr esto.

.box {
  animation-delay: 4s;
}

Al igual que otros valores basados ​​en el tiempo, puede configurar el animation-delay a un valor usando segundos o milisegundos. También puede utilizar valores fraccionarios.

Es importante tener en cuenta que el retraso ocurre solo en la primera iteración, no en cada iteración. Puede probar esto usando la demostración interactiva a continuación:

La demostración le brinda la opción de cambiar el valor de la iteración, así como la demora, para que pueda ver que la demora no afecta las iteraciones posteriores, solo la primera.

Una forma interesante de usar esta propiedad es con un valor negativo. Por ejemplo, utilizando la demostración anterior, intente configurar el animation-delay a -0.5s. Notará que el retraso negativo funciona casi como avanzar en una máquina del tiempo: la animación comienza en la mitad en lugar de al principio.

La propiedad animation-fill-mode

La propiedad manual final que cubriré en este tutorial de animaciones CSS es una que usé en la demostración anterior. Notarás que cuando la animación detiene la iteración final, el cuadro permanece donde está. Esto se logra utilizando animation-fill-mode.

.box {
  animation-fill-mode: forwards;
}

Esta propiedad establece cómo una animación aplica estilos al elemento de destino antes y después de su ejecución. Eso es un poco difícil de entender conceptualmente, así que cubriré el significado de cada valor; luego puede comparar los valores usando la demostración interactiva.

Esta propiedad acepta los siguientes cuatro valores de palabra clave:

• none – El valor predeterminado, sin estilos aplicados antes o después de la ejecución
• forwards – Conserva todos los estilos aplicados en el último fotograma clave de la animación
• backwards – Más o menos al revés del valor anterior, conserva los estilos aplicados a la animación tan pronto como comienza la ejecución pero antes de que comience la animación.
• both – Conserva estilos para ambos forwards y backwards

La demostración final en este tutorial de animaciones CSS hará las cosas un poco más claras, pero es posible que le cueste mucho jugar antes de que realmente entienda lo que hace y cómo lo logra.

Para mayor comodidad, he agregado todas las demostraciones en una sola colección de CodePen.

Notará que la demostración le permite ajustar el modo de relleno, el retraso, la dirección y la cantidad de iteraciones, ya que todo esto puede tener un efecto en la apariencia. También agregué un color de fondo diferente al cuadro animado en el primer fotograma clave, lo que nuevamente ayuda a que los valores del modo de relleno sean un poco más claros. Si todavía no entiendes cómo animation-fill-mode funciona, puedes revisar un articulo mas antiguo Escribí que discute animation-fill-mode en profundidad

La propiedad abreviada de animación

He cubierto ocho propiedades diferentes en este tutorial de animación CSS para principiantes y lo animo a usar la mano larga. Esto le facilitará ver los valores explícitos establecidos.

Una vez que tenga una buena comprensión de cada una de las propiedades, tiene la opción de usar el animation propiedad abreviada, que le permite definir todas las propiedades abreviadas en una sola declaración.

.box {
  animation: moveObject 2s ease-in-out 3 reverse running 1.3s forwards;
}

Con toda honestidad, eso es mucha información en una sola línea. Recomendaría usar la abreviatura si la declaración no incluye todas las propiedades, pero tal vez solo tres o cuatro de ellas.

Si usa la abreviatura, puede poner los valores en el orden que desee, pero tenga en cuenta las siguientes reglas:

• El primer valor que define el tiempo es el animation-duration; cualquier valor de tiempo subsiguiente es el animation-delay.
• Si hay un conflicto entre una palabra clave y el animation-nameel valor de la palabra clave tendrá prioridad si aparece primero.
• Cualquier valor omitido volverá a su estado inicial, como con cualquier propiedad abreviada de CSS.

Aplicar múltiples animaciones a un solo elemento

Una característica final que es bueno tener en cuenta es que tiene la opción de aplicar múltiples animaciones a un solo objeto separando las animaciones por comas.

Aquí hay un ejemplo usando la abreviatura:

.box {
  animation: moveObject 2s ease-in-out, fadeBox 3s linear;
}

Aquí, definí dos animaciones diferentes que se asignarían a dos conjuntos diferentes de fotogramas clave, pero se aplicarían al mismo objeto. Ese mismo código podría escribirse a mano como:

.box {
  animation-name: moveObject, fadeBox;
  animation-duation: 2s, 3s;
  animation-timing-function: ease-in-out, linear;
}

Observe cómo cada propiedad incluye dos valores separados por comas. En este caso, la taquigrafía sería casi definitivamente más fácil de leer y mantener.

Terminando este tutorial de animaciones CSS

👉 Una advertencia final: use la animación con moderación y recuerde que algunos usuarios de la web pueden verse afectados negativamente por los colores parpadeantes y otros objetos que se mueven rápidamente.