Animaciones

Las animaciones son una excelente manera de resaltar elementos interactivos y agregar interés y divertidos a tus diseños. En este módulo, aprenderás a agregar y controlar efectos de animación con CSS.

En las interfaces, algunas veces, verás pequeños ayudas que brindan información útil información sobre la sección en la que se encuentran cuando haces clic en ellos. Estos suelen tener un animación que parpadea para avisarte sutilmente que la información está allí y con el que se debe interactuar. En este módulo, se muestra cómo crear esas ayudas y otras animaciones usando o CSS.

Los íconos intermitentes son una forma de garantizar que los usuarios presta atención a la información importante.

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 animaciones. de estados a marcas de tiempo en una línea de tiempo.

Por ejemplo, aquí hay una línea de tiempo del destello de la palabra "helper" punto. Se ejecuta la animación durante 1 segundo y tiene 2 estados.

Los estados de la animación destellante.

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

La animación que parpadea con fotogramas clave.

@keyframes

Navegadores compatibles

• (43)
• (12)
• (16)
• (9)

Origen

CSS @keyframes 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 la 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 el nombre de una función. lo que te permite hacer referencia a la regla de fotogramas clave en otras partes del código CSS.

Nota: Se usa <custom-ident> en varios lugares de CSS para que puedas proporcionar tu propio nombre para las cosas. Estos identificadores distinguen mayúsculas de minúsculas y, en algunos hay palabras que no puedes usar. Por ejemplo, al nombrar líneas en CSS 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. 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 todas las posiciones que desees durante el período. En el ejemplo del asistente que parpadea, hay dos estados que se traducen en dos los fotogramas clave. Esto significa que tienes dos posiciones dentro de la regla de los fotogramas clave para representar los cambios para cada uno de estos fotogramas clave.

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

Edita la regla pulse para ver cómo la animación cambios.

Las propiedades de animation

Navegadores compatibles

• (43)
• (12)
• (16)
• (9)

Origen

Para usar tu @keyframes en una regla de CSS, puedes definir varias animaciones de forma individual o usa la animation atajo.

animation-duration

Navegadores compatibles

• (43)
• (12)
• (16)
• (9)

Origen

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

La clase animation-duration define la longitud del cronograma @keyframes como un valor de tiempo. El valor predeterminado es 0 segundos, lo que significa que la animación se sigue ejecutando, pero será demasiado rápido para que lo vean. No puedes usar valores de tiempo negativos.

animation-timing-function

Navegadores compatibles

• (43)
• (12)
• (16)
• (9)

Origen

Para ayudar a recrear el movimiento natural en la animación, puedes usar funciones de sincronización que calcular la velocidad de una animación en cada punto. Los valores calculados suelen ser curva, lo que hace que la animación se ejecute a velocidades variables a lo largo de animation-duration y hacer que parezca que el elemento rebota si el navegador calcula un valor superior a los definidos en @keyframes.

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

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

Intenta cambiar la función de sincronización de la animación que la plataforma usa.

Los valores de la función de aceleración parecen curvarse porque la aceleración se calcula usando una Curva Bézier: Es un tipo de función que se usa para modelar la velocidad. Cada uno de los tiempos Las palabras clave de función, como ease, hacen 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 trazan cada parte de la curva en los ejes X e Y.

Ejemplo de una curva Bézier.

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

La función de aceleración steps

A veces, tal vez quieras tomar un control más detallado de tu animación que se mueven a intervalos en lugar de a lo largo de una curva. La función de aceleración steps() permite Divides el cronograma en intervalos definidos de igual duración.

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

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

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

Compara las animaciones con pasos y sin ellos.

animation-iteration-count

Navegadores compatibles

• (43)
• (12)
• (16)
• (9)

Origen

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

El animación-iteración-count define cuántas veces se debe ejecutar el cronograma @keyframes durante la animación. Es 1 de forma predeterminada, lo que significa que la animación se detiene cuando cuando llegue el final del cronograma. Este valor no puede ser un número negativo.

Intenta cambiar el recuento de iteraciones de esta animación.

Para crear un bucle de animación, establece el recuento de iteraciones en infinite. Así es como funciona la animación que parpadea desde el inicio de esta lección.

La animación que parpadea se itera de manera infinita.

animation-direction

Navegadores compatibles

• (43)
• (12)
• (16)
• (9)

Origen

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

Puedes establecer en qué dirección se ejecutará el cronograma sobre los fotogramas clave con animation-direction, que toma los siguientes valores:

• normal: Es el valor predeterminado, que se reenvía.
• reverse: Se desplaza hacia atrás sobre la línea de tiempo.
• alternate: Para cada iteración de la animación, el cronograma alterna entre corriendo hacia adelante y corriendo hacia atrás.
• alternate-reverse: Es similar a alternate, pero la animación comienza con el de la línea de tiempo se está retrocediendo.

Cambia la dirección de la animación.

animation-delay

Navegadores compatibles

• (43)
• (12)
• (16)
• (9)

Origen

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

El animación-retraso define cuánto tiempo espera el navegador antes de iniciar la animación. Al igual que la propiedad animation-duration, esto toma un valor de tiempo.

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

Intenta cambiar el retraso de la animación.

animation-play-state

Navegadores compatibles

• (43)
• (12)
• (16)
• (9)

Origen

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

El Animation-play-state te permite reproducir y pausar la animación. El valor predeterminado es running. Si lo estableces en paused, se detiene la animación.

Mantén el cursor sobre el elemento animado para pausar la animación.

animation-fill-mode

Navegadores compatibles

• (43)
• (12)
• (16)
• (9)

Origen

El modo animation-fill-mode define qué valores de tu cronograma @keyframes se conservan antes de la comienza la animación o después de que finaliza. 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 persiste en función de la dirección de la animación.
• backwards: El primer fotograma clave persiste en función de la dirección de la animación.
• both: Se conservan el primer y el último fotograma clave.

Cambia el modo de relleno.

La abreviatura animation

En lugar de definir cada propiedad por separado, puedes definirlas en una Abreviatura de animation, que te permite definir las propiedades de la animación en la 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 tener en cuenta al trabajar con animaciones

Los usuarios pueden configurar su sistema operativo para que prefiera la reducción de movimiento. cuando interactúa con aplicaciones y sitios web. Puedes detectar esta preferencia con la clase prefers-reduced-motion consulta de medios:

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

Esta no es necesariamente una preferencia por la ausencia de animación. Es una preferencia por obtener en especial las menos inesperadas. Puedes obtener más información sobre esta preferencia y el rendimiento general de nuestros guía de animación.

Prueba un ejemplo de animación reducida.

Verifica tus conocimientos

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 permite que SWOOP y swoop coexistan.

Las palabras clave from y to son iguales a:

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.

La animation-timing-function también se conoce comúnmente como:

Tiempo dinámico

Vuelve a intentarlo.

Demora

Vuelve a intentarlo.

Easing

🎉

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

1

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

2

Vuelve a intentarlo.

3

Vuelve a intentarlo.

4

Vuelve a intentarlo.