Animaciones

La animación es una excelente manera de destacar elementos interactivos y agregar interés y diversión a tus diseños. En este módulo, descubrirás cómo agregar y controlar efectos de animación con CSS.

A veces, verás pequeños ayudantes en las interfaces que proporcionan información útil acerca de la sección en la que se encuentran cuando haces clic en ellos. A menudo, tienen una animación intermitente para informarte sutilmente que la información está allí y que se debe interactuar con ella. En este módulo, se muestra cómo crear esos asistentes 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 las marcas de tiempo en un cronograma.

Por ejemplo, a continuación se muestra una línea de tiempo para el punto que parpadea "helper". La animación se ejecuta durante 1 segundo y tiene 2 estados.

Hay un punto específico donde comienza y termina cada uno de los estados de la animación. Ubica estos elementos en el cronograma con fotogramas clave.

@keyframes

Las @keyframes de CSS se basan en el mismo concepto que los fotogramas clave de la 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), que es el nombre de la regla de fotogramas clave. En este ejemplo, el identificador es my-animation. El identificador personalizado funciona como el nombre de una función, que te permite hacer referencia a la regla de fotogramas clave en otra parte del código CSS.

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. Podrías volver a crear la misma regla de la siguiente manera:

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

Puedes agregar todos los puestos que desees durante el período. En el ejemplo del asistente de luz intermitente, hay dos estados que se traducen en dos fotogramas clave. Esto significa que hay dos posiciones dentro de la regla de fotogramas clave para representar los cambios de cada uno de ellos.

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

Las propiedades de animation

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

animation-duration

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

La propiedad animation-duration define cuánto tiempo debe ser el cronograma @keyframes como un valor de tiempo. El valor predeterminado es de 0 segundos, lo que significa que la animación se seguirá ejecutando, pero será demasiado rápido para que la veas. No puedes usar valores de tiempo negativos.

animation-timing-function

Para ayudar a recrear el movimiento natural en la animación, puedes usar funciones de sincronización 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 en el transcurso de animation-duration y hace que el elemento parezca rebotar si el navegador calcula un valor superior a los definidos en @keyframes.

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

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

Los valores de las funciones de aceleración parecen curvas, ya que la aceleración se calcula con una curva 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 sincronización, como ease, hace referencia a una curva Bézier predefinida. En CSS, puedes definir una curva 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 representan cada parte de la curva a lo largo del eje X e Y.

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

La función de aceleración steps

En ocasiones, es posible que desees tomar un control más detallado de tu animación moviéndose en intervalos en lugar de una curva. La función de aceleración steps() te permite dividir el cronograma en intervalos definidos de igual duración.

.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 pasos, cada uno se reproduce en secuencia por 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 como end, que es la configuración predeterminada, los pasos finalizan al final del 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

.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 del cronograma. Este valor no puede ser un número negativo.

Para crear el bucle de animación, establece el recuento de iteraciones en infinite. Así es como funciona la animación intermitente que se muestra al comienzo de esta lección.

animation-direction

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

Puedes establecer en qué dirección se ejecutará el cronograma sobre tus fotogramas clave con la dirección de la animación, que toma los siguientes valores:

• normal: Es el valor predeterminado, que se reenvía.
• reverse: Se ejecuta hacia atrás en tu línea de tiempo.
• alternate: Para cada iteración de animación, el cronograma alterna entre correr hacia adelante y hacia atrás.
• alternate-reverse: Es similar a alternate, pero la animación comienza con el cronograma ejecutándose hacia atrás.

animation-delay

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

La propiedad animation-delay define cuánto tiempo esperará el navegador antes de iniciar la animación. Al igual que la propiedad animation-duration, toma 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 cronograma. Por ejemplo, si la animación dura 10 segundos y configuras animation-delay en -5s, la animación comenzará desde la mitad del cronograma.

animation-play-state

.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 se establece en paused, se detiene la animación.

animation-fill-mode

La propiedad animation-fill-mode define qué valores en tu cronograma de @keyframes se conservan antes de que comience la animación o después de que termine. El valor predeterminado es none, lo que significa que, cuando se completa la animación, se descartan los valores del cronograma. Estas son otras opciones:

• forwards: El último fotograma clave se mantiene, según la dirección de la animación.
• backwards: Se mantiene el primer fotograma clave según la dirección de la animación.
• both: Se conservan el primer y el último fotograma clave.

La abreviatura animation

En lugar de definir cada propiedad por separado, puedes definirlas en una abreviatura animation, lo 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;
}

Aspectos que debes tener en cuenta para trabajar con animación

Los usuarios pueden configurar su sistema operativo para que prefieran movimiento reducido cuando interactúen 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;
  }
}

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

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre animaciones