Animaciones

The CSS Podcast - 022: Animation

A veces, ves pequeños ayudantes en las interfaces que, cuando se hace clic en ellos, proporcionan información útil sobre esa sección en particular. A menudo, tienen una animación intermitente para informarte sutilmente que la información está allí y que debes interactuar con ella. En este módulo, se muestra cómo crear esos ayudantes y otras animaciones con CSS.

Puedes usar CSS para establecer una secuencia de animación con fotogramas clave. Estas secuencias pueden ser animaciones básicas de un estado o secuencias complejas basadas en el tiempo.

¿Qué es un fotograma clave?

En la mayoría de las herramientas de animación, los fotogramas clave son el mecanismo que usas para asignar estados de animación a marcas de tiempo en un cronograma.

Por ejemplo, este es un cronograma del punto “ayudante” intermitente. La animación se ejecuta durante 1 segundo y tiene 2 estados.

Hay un punto específico en el que comienza y termina cada uno de estos estados de animación. Puedes asignarlos en el cronograma con fotogramas clave.

@keyframes

Browser Support

• 43
• 12
• 16
• 9

Source

Los @keyframes de CSS se basan en el mismo concepto que los fotogramas clave de animación.

Este es un ejemplo con dos estados:

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

La primera parte importante es el identificador personalizado (custom-ident), el nombre de la regla de fotogramas clave. El identificador en este ejemplo es my-animation. El identificador personalizado funciona como un nombre de función, lo que te permite hacer referencia a la regla de fotogramas clave en otra parte de tu código CSS.

Nota: Se usa un <custom-ident> en varios lugares del CSS para permitirte proporcionar tu propio nombre para los elementos. Estos identificadores distinguen entre mayúsculas y minúsculas, y en algunos casos hay palabras que no puedes usar. Por ejemplo, cuando asignas nombres a líneas en CSS Grid, no puedes usar la palabra span.

Dentro de la regla de fotogramas clave, from y to son palabras clave que representan 0% y 100%, que son el inicio y el final de la animación. Puedes volver a crear la misma regla de la siguiente manera:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

Puedes agregar tantas posiciones como desees durante el período. En el ejemplo del ayudante de pulsación, hay dos estados que se traducen a dos fotogramas clave. Esto significa que tienes dos posiciones dentro de la regla de fotogramas clave para representar los cambios de cada uno de estos fotogramas clave.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

Las propiedades animation

Browser Support

• 43
• 12
• 16
• 9

Source

Para usar tu @keyframes en una regla de CSS, puedes definir varias propiedades de animación de forma individual o usar la propiedad de abreviatura animation.

animation-duration

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-duration: 10s;
}

La propiedad animation-duration define la duración de la línea de tiempo @keyframes como un valor de tiempo. El valor predeterminado es de 0 segundos, lo que significa que la animación seguirá ejecutándose, pero será demasiado rápida para que la veas. No puedes usar valores de tiempo negativos.

animation-timing-function

Browser Support

• 43
• 12
• 16
• 9

Source

Para ayudar a recrear el movimiento natural en la animación, puedes usar funciones de tiempo que calculan la velocidad de una animación en cada punto. Los valores calculados suelen ser curvos, lo que hace que la animación se ejecute a velocidades variables a lo largo de animation-duration y que el elemento parezca rebotar si el navegador calcula un valor más allá de los definidos en @keyframes.

Hay varias palabras clave disponibles como ajustes predeterminados en CSS, que se usan como valor para animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out.

.my-element {
    animation-timing-function: ease-in-out;
}

Los valores de la función de suavización parecen curvarse porque se calculan con una curva de Bézier, un tipo de función que se usa para modelar la velocidad. Cada una de las palabras clave de la función de tiempo, como ease, hace referencia a una curva de Bézier predefinida. En CSS, puedes definir una curva de Bézier directamente con la función cubic-bezier(), que acepta cuatro valores numéricos: x1, y1, x2 y y2.

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

Estos valores trazan cada parte de la curva a lo largo de los ejes X e Y.

Comprender las curvas de Bézier es complicado. Las herramientas visuales, como este generador de Lea Verou, son muy útiles.

La función de suavización steps

A veces, es posible que quieras controlar tu animación de forma más detallada moviéndola en intervalos en lugar de hacerlo a lo largo de una curva. La función de suavización steps() te permite dividir la línea de tiempo en intervalos definidos de duración igual.

.my-element {
    animation-timing-function: steps(10, end);
}

El primer argumento es la cantidad de pasos. Si hay la misma cantidad de fotogramas clave que de pasos, cada fotograma clave se reproduce en secuencia durante la duración exacta de su paso, sin transición entre estados. Si hay menos fotogramas clave que pasos, el navegador agrega pasos entre los fotogramas clave según el segundo argumento.

El segundo argumento es la dirección. Si está configurado en end, que es la configuración predeterminada, los pasos finalizarán al final de tu cronograma. Si se establece en start, el primer paso de la animación se completa en cuanto comienza, lo que significa que finaliza un paso antes que end.

animation-iteration-count

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-iteration-count: 10;
}

La propiedad animation-iteration-count define cuántas veces se debe ejecutar el cronograma @keyframes durante la animación. De forma predeterminada, es 1, lo que significa que la animación se detiene cuando llega al final de la línea de tiempo. Este valor no puede ser un número negativo.

Para hacer que la animación se repita, establece el recuento de iteración en infinite. Así es como funciona la animación de pulsación del principio de esta lección.

animation-direction

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-direction: reverse;
}

Puedes establecer en qué dirección se ejecuta la línea de tiempo sobre tus fotogramas clave con animation-direction, que toma los siguientes valores:

• normal: El valor predeterminado, que es hacia adelante.
• reverse: Se ejecuta hacia atrás en tu línea de tiempo.
• alternate: Para cada iteración de animación, la línea de tiempo alterna entre la reproducción hacia adelante y hacia atrás.
• alternate-reverse: Es similar a alternate, pero la animación comienza con la línea de tiempo reproduciéndose hacia atrás.

animation-delay

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element {
    animation-delay: 5s;
}

La propiedad animation-delay define cuánto tiempo espera el navegador antes de iniciar la animación. Al igual que la propiedad animation-duration, acepta un valor de tiempo.

A diferencia de animation-duration, puedes definir animation-delay como un valor negativo, lo que hace que la animación comience en el punto correspondiente de tu línea de tiempo. Por ejemplo, si tu animación dura 10 segundos y configuras animation-delay en -5s, la animación comienza a la mitad de tu línea de tiempo.

animation-play-state

Browser Support

• 43
• 12
• 16
• 9

Source

.my-element:hover {
    animation-play-state: paused;
}

La propiedad animation-play-state te permite reproducir y pausar la animación. El valor predeterminado es running. Si lo configuras como paused, la animación se pausa.

animation-fill-mode

Browser Support

• 43
• 12
• 16
• 9

Source

La propiedad animation-fill-mode define qué valores de tu línea de tiempo @keyframes persisten antes de que comience la animación o después de que finalice. El valor predeterminado es none, lo que significa que, cuando se completa la animación, se descartan los valores de tu línea de tiempo. Estas son otras opciones:

• forwards: El último fotograma clave persiste según la dirección de la animación.
• backwards: El primer fotograma clave persiste según la dirección de la animación.
• both: Tanto el primer fotograma clave como el último persisten.

La abreviatura animation

En lugar de definir cada propiedad por separado, puedes definirlas en una representación simbólica animation, que te permite definir las propiedades de animación en el siguiente orden:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

Consideraciones para trabajar con animaciones

Los usuarios pueden configurar su sistema operativo para preferir un movimiento reducido cuando interactúan con aplicaciones y sitios web. Puedes detectar esta preferencia con la consulta de medios prefers-reduced-motion:

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

Esto no es necesariamente una preferencia por no tener animación. Es una preferencia por menos animación, en especial, menos animación inesperada. Puedes obtener más información sobre esta preferencia y el rendimiento general en nuestra guía de animación.

Verifica tu comprensión

Pon a prueba tus conocimientos sobre animaciones

¿El nombre o identificador personalizado de una animación @keyframes distingue mayúsculas de minúsculas?

Sí

🎉

No

CSS no permite que 2 animaciones tengan el mismo nombre, pero sí permite que SWOOP y swoop coexistan.

Las palabras clave from y to son iguales a las siguientes:

start y end.

Vuelve a intentarlo.

0% y 100%.

from es lo mismo que 0% y to es lo mismo que 100%.

0 y 1

Vuelve a intentarlo.

animation-timing-function también se conoce como:

Tiempos dinámicos

Vuelve a intentarlo.

Demora

Vuelve a intentarlo.

Easing

🎉

¿Cuál es la cantidad mínima de fotogramas clave necesarios dentro de una animación @keyframes?

1

El navegador tomará el estado actual del elemento como fotograma clave, por lo que se requiere, como mínimo, 1 fotograma clave.

2

Vuelve a intentarlo.

3

Vuelve a intentarlo.

4

Vuelve a intentarlo.