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 propiedades animation-* junto con un conjunto de fotogramas clave de animación que se definen mediante la regla @keyframes . Echemos un vistazo en detalle a lo que implica crear un conjunto de reglas de @keyframes .

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í, la regla @keyframes incluye tres partes básicas:

• La regla @keyframes 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, definí 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 las reglas de identificación personalizadas en CSS. Este nombre personalizado debe coincidir con el nombre utilizado en la propiedad animation-name (que se analiza 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 a 0% y 100% , puedo usar alternativamente las palabras clave from y to :

 @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 la sintaxis de @keyframes :

• 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% ...
• La palabra clave !important 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 sintaxis de @keyframes 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 la sintaxis @keyframes . Este nombre tiene que ser el mismo nombre definido usando la propiedad animation-name .

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 un nombre para una regla @keyframes ; de lo contrario, este nombre no hará nada. Puede pensar en esto como una llamada de función en JavaScript. La función en sí sería la parte @keyframes moveObject 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 de 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 , initial o inherit .

La propiedad de duración de la animación

La propiedad animation-duration , no sorprende, 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;

Puede ver la propiedad animation-duration 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 usar valores fraccionarios (por ejemplo, 0.8s )

La propiedad animation-timing-function

La animation-timing-function , que no es tan obvia 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 los valores de facilidad- ease-* 'facilitan' la animación de varias maneras. Un valor lineal es consistente en todo el camino.

La propiedad animation-timing-function 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 palabra clave step-start y step-end son equivalentes a los valores steps(1, jump-start) y steps(1, jump-end) , respectivamente.

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

Observe que la demostración le permite configurar los cuatro argumentos en la función cubic-bezier() . 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.

La función steps() , 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. La propiedad animation-iteration-count le permite hacer esto al aceptar 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 de animation-iteration-count es 1 , pero también puede usar la palabra clave infinite (se explica por sí mismo) o usar 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 la propiedad animation-direction (que se analiza a continuación), porque una animación que se ejecuta solo 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, la propiedad animation-direction funciona muy bien junto con animation-iteration-count . La propiedad animation-direction 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 hacia atrá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

La propiedad animation-play-state no es extremadamente útil en un entorno de CSS estático, pero puede resultar útil al escribir animaciones que son interactivas mediante JavaScript o incluso CSS.

Esta propiedad acepta dos valores: running o en 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. La propiedad animation-delay le permite lograr esto.

 .box animation-delay: 4s;

Al igual que otros valores basados ​​en el tiempo, puede establecer el animation-delay en un valor de 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, usando la demostración anterior, intente configurar el animation-delay en -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 usando 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, no se aplican estilos 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 los estilos tanto para forwards como para 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 aún no entiende cómo funciona animation-fill-mode , puede consultar un artículo anterior que escribí que analiza 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 la propiedad abreviada de animation , 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 animation-duration ; cualquier valor de tiempo subsiguiente es el animation-delay .
• Si hay un conflicto entre una palabra clave y el animation-name , el 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.