Editor de suavizado cubic-bézier
Diseña curvas de suavizado cubic-bezier personalizadas con un editor arrastrable y vista previa de animación en directo.
Arrastra los dos tiradores para dar forma a la curva de suavizado.
transition-timing-function: —;
animation-timing-function: —;
Todo se ejecuta en tu navegador: no se sube nada.
Acerca de Editor de suavizado cubic-bézier
El Editor de Suavizado Cubic-Bézier diseña funciones de temporización personalizadas para transiciones y animaciones CSS. Arrastra los dos controladores en el lienzo de la curva y el valor cubic-bezier(x1, y1, x2, y2) se actualiza en vivo; una vista previa de animación reproduce el suavizado junto a una referencia lineal para que sientas la diferencia, con una duración ajustable y repetición instantánea.
Diez ajustes predefinidos cubren el vocabulario habitual: el ease estándar, ease-in, ease-out y ease-in-out, además de curvas expresivas como back y anticipate que se pasan de sus puntos finales, y rampas de estilo material accelerate y decelerate. Úsalos tal cual o como puntos de partida para arrastrar hacia algo propio.
También puedes escribir coordenadas exactas de puntos de control, pulsar aleatorizar para inspirarte, y copiar el valor cubic-bezier() a secas o una regla CSS lista para pegar. Todo el editor se ejecuta en tu navegador.
Cómo usar Editor de suavizado cubic-bézier
- Arrastra los dos controladores en el editor de curva para dar forma al suavizado.
- Haz clic en Repetir y compara la animación suavizada con la referencia lineal, ajustando la duración si es necesario.
- Prueba los ajustes predefinidos (ease, back, anticipate, material y más) como punto de partida rápido.
- Ajusta con precisión con las entradas numéricas de puntos de control para valores exactos.
- Copia el valor cubic-bezier() o el fragmento CSS completo.