Generador de Easing CSS
Ajusta curvas cubic-bezier para transitions y animations de CSS mientras previsualizas el movimiento.
CURVAease
Arrastra los manejadores o edita los números para ajustar la curva.
Valor actualcubic-bezier(0.25, 0.1, 0.25, 1)
PREVIEW
El elemento se mueve con el mismo easing. Al cambiar valores, la vista previa se reproduce de nuevo.
CSS
Úsalo como timing function en transitions o animations de CSS.
.element {
transition: transform 420ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.element.is-active {
transform: translateX(120px);
}SOBRE ESTA HERRAMIENTA
Ajusta curvas cubic-bezier para transitions y animations de CSS mientras previsualizas el movimiento.
- Esta herramienta se ejecuta en tu navegador. Los archivos y el contenido introducido no se suben al servidor para procesarse.
CASOS DE USO
- Ajustar el easing para transitions y animations de CSS
- Previsualizar movimientos cubic-bezier desde presets comunes
- Copiar el valor ajustado como código CSS
PREGUNTAS FRECUENTES
- ¿Qué puede hacer esta herramienta?
- Ajusta curvas cubic-bezier para transitions y animations de CSS mientras previsualizas el movimiento.
- ¿Cómo se maneja lo que introduzco?
- El procesamiento ocurre en tu navegador. Los archivos y el contenido introducido no se envían al servidor para procesarse.
- ¿No basta con los presets estándar de CSS?
- Muchas veces sí. Cuando necesitas ajustar mejor la respuesta de una interfaz o el remate del movimiento, es más práctico editar cubic-bezier viendo la previsualización.