Generador CSS Easing
Editor de Curvas Bézier
Vista Previa de Animación
Efectos de Aceleración Comunes
Generador CSS easing online gratuito. Arrastra los puntos de control para crear curvas cubic-bezier. Preajustes integrados para ease, ease-in, ease-out, ease-in-out y linear. Vista previa de animación en tiempo real.
Consejos y Trucos
Arrastrar Puntos de Control
Arrastre los dos puntos de control (P1, P2) directamente sobre la curva para ajustar la curva de aceleración en tiempo real. El eje X representa el progreso del tiempo, el eje Y representa el cambio de propiedad y la pendiente de la curva determina la variación de velocidad de la animación.
Vista Previa de Animación en Vivo
Haga clic en "Reproducir Animación" para ver cómo se mueve la bola a lo largo de la trayectoria de la función de aceleración. La barra de progreso muestra intuitivamente el avance del tiempo.
Copiar con un Clic CSS
Después de ajustar, haga clic en el botón "Copiar" para copiar automáticamente el código CSS cubic-bezier() al portapapeles, listo para pegar directamente en su proyecto.
Casos de Uso Comunes
Animaciones de Entrada
ease-out
Animaciones de Salida
ease-in
Transiciones
ease-in-out
Efectos de Flotación
Curvas Personalizadas
Indicadores de Progreso
linear
Preguntas Frecuentes
¿Qué es cubic-bezier?
cubic-bezier es una función CSS que define la curva de velocidad de una animación, descrita por una curva Bézier cúbica a través de dos puntos de control: P1 (x1, y1) y P2 (x2, y2). El eje X de la curva representa el progreso del tiempo (0→1), y el eje Y representa el cambio de propiedad (0→1). Una curva más empinada significa mayor velocidad; una curva más plana significa menor velocidad.
¿Cómo uso la aceleración personalizada en CSS?
Úselo directamente en propiedades de transición o animación CSS: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);. El área de salida de código del generador produce automáticamente el código CSS correcto. Haga clic en copiar para pegarlo y usarlo directamente.
¿Cuáles son los rangos válidos para X e Y?
CSS cubic-bezier() requiere que los valores X estén entre 0 y 1 (correspondiendo al tiempo desde el inicio hasta el final), y los valores Y están típicamente entre 0 y 1 pero pueden exceder ese rango (para crear efectos de rebote). Esta herramienta limita X a [0, 1] e Y a [0, 1] para garantizar que las curvas generadas sean funciones de aceleración CSS válidas.
¿Cuál es la diferencia entre las aceleraciones predefinidas?
ease: Rápido luego lento luego rápido, adecuado para transiciones generales.
ease-in: Lento a rápido, adecuado para animaciones de salida (elementos que se van).
ease-out: Rápido a lento, adecuado para animaciones de entrada (elementos que entran), la aceleración más utilizada.
ease-in-out: Lento en ambos extremos, rápido en el medio, más suave que ease.
linear: Velocidad constante, adecuado para cambios de rotación y otras animaciones que no necesitan aceleración.