La duración de una animación dice cuánto tarda, y su suavizado dice cómo cambia la velocidad por el camino. El movimiento lineal se siente mecánico, mientras que un buen suavizado se siente natural.
Las palabras clave
CSS te da funciones de tiempo con nombre, cada una una curva predefinida:
- linear: velocidad constante.
- ease: empieza rápido y se frena hacia el final. Es el valor por defecto. Equivale a
cubic-bezier(0.25, 0.1, 0.25, 1). - ease-in: empieza lento y acelera,
cubic-bezier(0.42, 0, 1, 1). - ease-out: empieza rápido y desacelera,
cubic-bezier(0, 0, 0.58, 1). - ease-in-out: lento en ambos extremos,
cubic-bezier(0.42, 0, 0.58, 1).
Leer cubic-bezier(x1, y1, x2, y2)
La curva se dibuja en un cuadrado. El tiempo corre por el eje horizontal de 0 a 1 y el progreso por el vertical de 0 a 1. La curva empieza en (0, 0) y termina en (1, 1). Los cuatro números son las coordenadas de dos puntos de control que curvan el trazo entre esos extremos.
- x1 y x2 deben estar entre 0 y 1, porque el tiempo no puede ir hacia atrás.
- y1 e y2 pueden estar fuera de 0 a 1, lo que hace que la animación se pase o retroceda primero.
Un tramo empinado de la curva significa movimiento rápido; un tramo plano significa movimiento lento.
Rebote y anticipación
Un valor de y superior a 1 hace que el elemento se pase de su destino y vuelva, como en cubic-bezier(0.34, 1.56, 0.64, 1). Un valor negativo de y hace que primero tome impulso en sentido contrario. Estas curvas aportan personalidad pero deben usarse con cuidado.
Elegir el suavizado en la práctica
- Los elementos que entran suelen usar ease-out, para llegar rápido y asentarse.
- Los elementos que salen suelen usar ease-in, para acelerar al irse.
- Los elementos que se mueven por la pantalla y permanecen en ella encajan con ease-in-out.
Dónde usarla
La misma función se aplica en transition-timing-function, animation-timing-function y las propiedades abreviadas.
Preguntas frecuentes
¿Por qué mi curva se ve igual que ease? Compara los cuatro números. Las diferencias pequeñas en los puntos de control son sutiles.
¿Y steps()? Salta entre valores discretos en lugar de moverse con suavidad, útil para hojas de sprites.