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.
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.
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.
@keyframes
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.
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;
}
}
Las propiedades de animation
Para usar tu @keyframes
en una regla de CSS, puedes definir varias animaciones
de forma individual o usa la animation
atajo.
animation-duration
.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
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;
}
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.
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
.
animation-iteration-count
.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.
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.
animation-direction
.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 aalternate
, pero la animación comienza con el de la línea de tiempo se está retrocediendo.
animation-delay
.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.
animation-play-state
.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.
animation-fill-mode
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.
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:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
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.
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?
Las palabras clave from
y to
son iguales a:
start
y end
.0
y 1
0%
y 100%
.La 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 de tipo @keyframes
?