Herramientas CSS/Editor de Funciones Easing
Editor de Funciones Easing
Diseña funciones easing cubic-bezier personalizadas para animaciones suaves
Editor de Curvas
Arrastra los puntos de control para ajustar la curva
Controles
1s
Vista Previa de Animación
Presets
Código CSS
Loading...Guía del Generador de Easing
Crea funciones de temporización personalizadas para animaciones fluidas
¿Qué es Easing?
Las funciones de easing controlan la velocidad de las animaciones a lo largo del tiempo. Hacen los movimientos más naturales simulando aceleración y desaceleración.
Cómo Usar
- Selecciona un tipo de easing o crea una curva personalizada
- Arrastra los puntos de control para dar forma a la curva
- Previsualiza la animación con diferentes duraciones
- Copia el valor cubic-bezier para CSS
Consejos Pro
- Ease-out funciona bien para animaciones de entrada
- Ease-in es adecuado para animaciones de salida
- Las curvas personalizadas pueden crear efectos de rebote
Soporte del Navegador
Las funciones cubic-bezier son compatibles con todos los navegadores modernos.
Preguntas frecuentes
¿Qué significan los 4 valores de cubic-bezier?
En cubic-bezier(x1, y1, x2, y2), x1 e y1 son el primer punto de control, x2 e y2 son el segundo punto de control. Los valores de x deben estar entre 0-1 (representan el tiempo), mientras que los valores de y pueden exceder ese rango (efecto de sobrepasar). Los puntos de inicio (0,0) y fin (1,1) son fijos.
¿Cuál es la diferencia entre ease, ease-in y ease-out?
Ease es suave al inicio y al final con un medio rápido. Ease-in comienza lento y se acelera (aceleración). Ease-out comienza rápido y se desacelera (desaceleración). Ease-in-out es lento al inicio y al final. Para animaciones de UI, ease-out se usa principalmente.
¿Cómo creo un efecto de rebote (elástico)?
Usa cubic-bezier con valores de y menores que 0 o mayores que 1. Por ejemplo: cubic-bezier(0.68, -0.55, 0.27, 1.55) crea un efecto elástico que sobrepasa ligeramente el objetivo al inicio y al final antes de regresar. Tales efectos añaden vitalidad a clics de botón o apariciones de modales.
¿Cuándo uso la función steps()?
La función steps() crea animaciones escalonadas en lugar de continuas. Es apropiada para movimientos discontinuos como animaciones de sprites, efectos de máquina de escribir o manecillas de segundos de un reloj. steps(5) ejecuta la animación dividida en 5 etapas.
¿Qué función de easing debo elegir?
Para elementos que aparecen, usa ease-out (aparece rápido y se asienta lentamente), para desaparecer usa ease-in (comienza lento y desaparece rápido). Para animaciones de movimiento, ease-in-out es natural. Para cambios de color de fondo o opacidad, linear es apropiado.