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, aprenderás a agregar y controlar efectos de animación con CSS.
A veces, verás pequeños asistentes 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 que te informa de forma sutil que la información está allí y que se debe interactuar con ella. ¿Cómo lo hacemos con CSS?
En CSS, puedes realizar este tipo de animación con animaciones de CSS, que te permiten establecer una secuencia de animación mediante fotogramas clave. Las animaciones pueden ser simples, de un estado o incluso secuencias complejas basadas en el tiempo.
¿Qué es un fotograma clave?
En el software de animación, CSS y la mayoría de las otras herramientas que te permiten animar algo, los fotogramas clave son el mecanismo que utilizas para asignar estados de animación a las marcas de tiempo, a lo largo de un cronograma.
Usemos "pulser" como contexto para esto. Toda la animación se ejecuta durante 1 segundo y abarca 2 estados.
Hay un punto específico donde comienza y termina cada uno de estos estados de animación. Ubica estos elementos en el cronograma con fotogramas clave.
@keyframes
Ahora que sabes qué es un fotograma clave, ese conocimiento debería ayudarte a comprender cómo funciona la regla @keyframes de CSS.
Esta es una regla básica con dos estados.
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
La primera parte que debes tener en cuenta es el identificador personalizado (identificador personalizado) o, en términos más humanos, el nombre de la regla de fotogramas clave.
El identificador de esta regla es my-animation.
El identificador personalizado funciona como un nombre de función. Como viste en el módulo de funciones,
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. Si usamos el contexto del ejemplo de "pulser", hay 2 estados, que se traducen en 2 fotogramas clave. Esto significa que hay 2 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, define varias propiedades de animación o utiliza la propiedad de abreviatura animation.
animation-duration
.my-element {
animation-duration: 10s;
}
La propiedad animation-duration define cuánto debe durar el cronograma @keyframes. Debe ser un valor de tiempo.
El valor predeterminado es de 0 segundos, lo que significa que la animación aún se ejecuta, pero será demasiado rápido para que la veas.
No puedes agregar 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, si un valor se calcula más allá del valor definido en @keyframes, hace que el elemento parezca rebotar.
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 y ease-in-out.
.my-element {
animation-timing-function: ease-in-out;
}
Los valores parecen curvarse con las funciones de aceleración porque la aceleración se calcula con una curva Bézier, 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 trazan cada parte de la curva a lo largo de los ejes X e Y.
Comprender las curvas Bézier es complicada y las herramientas visuales, como este generador de Lea Verou, son muy útiles.
La función de aceleración steps
A veces, es posible que desees tener un control más detallado de tu animación y, en lugar de moverte por una curva, quieras moverte en intervalos.
La función de aceleración steps() te permite dividir el cronograma en intervalos iguales definidos.
.my-element {
animation-timing-function: steps(10, end);
}
El primer argumento es cuántos pasos. Si los pasos se definen como 10 y hay 10 fotogramas clave, cada uno se reproducirá en secuencia durante el tiempo exacto, sin transición entre estados. Si no hay suficientes fotogramas clave para los pasos, se agregan los pasos entre ellos según el segundo argumento.
El segundo argumento es la dirección.
Si está configurado como end, que es el valor predeterminado, los pasos finalizarán 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 de @keyframes.
El valor predeterminado es 1, lo que significa que, cuando la animación llegue al final del cronograma, se detendrá al final.
El número no puede ser negativo.
Puedes usar la palabra clave infinite, que repetirá la animación indefinidamente, que es el funcionamiento de la demostración "pulser" del comienzo de esta lección.
animation-direction
.my-element {
animation-direction: reverse;
}
Puedes establecer la dirección en la que se ejecutará el cronograma en tus fotogramas clave con animation-direction:
normal: Es el valor predeterminado, que se reenvía.reverse: Se ejecuta hacia atrás en la línea de tiempo.alternate: Para cada iteración de animación, el cronograma se ejecutará hacia delante o hacia atrás en secuencia.alternate-reverse: Es lo contrario aalternate.
animation-delay
.my-element {
animation-delay: 5s;
}
La propiedad animation-delay define cuánto tiempo esperar antes de iniciar la animación.
Al igual que la propiedad animation-duration, acepta un valor de tiempo.
A diferencia de la propiedad animation-duration, puedes definirlo como un valor negativo.
Si estableces un valor negativo, el cronograma de tu @keyframes comenzará en ese momento.
Por ejemplo, si tu animación dura 10 segundos y estableces animation-delay en -5s, comenzará desde la mitad de la línea de tiempo.
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 y, si lo estableces en paused, se detendrá 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 finalice.
El valor predeterminado es none, lo que significa que, cuando se completa la animación, se descartan los valores de tu cronograma.
No obstante, también se ofrecen las siguientes opciones:
forwards: Se conservará el último fotograma clave según la dirección de la animación.backwards: Se conservará el primer fotograma clave según la dirección de la animación.both: Sigue las reglas deforwardsybackwards.
La abreviatura animation
En lugar de definir todas las propiedades por separado, puedes definirlas con una abreviatura animation, lo que te permite definir las propiedades de la animación en el siguiente orden:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-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 definir en su sistema operativo que prefieran reducir el movimiento experimentado cuando interactúan con aplicaciones y sitios web. Esta preferencia se puede detectar con la consulta de medios prefers-reduced-motion.
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
No es necesariamente una preferencia de ausencia de animación, sino una preferencia para reducir las animaciones, especialmente las inesperadas. Puedes obtener más información sobre esta preferencia y el rendimiento general en esta guía de animación.
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?
SWOOP y swoop coexistan.Las palabras clave from y to son iguales a
start y end.0% y 100%.from es igual que 0%, y to es igual al 100%.0 y 1El animation-timing-function también se conoce comúnmente como
¿Cuál es la cantidad mínima de fotogramas clave que se requieren dentro de una animación @keyframes?