¿Qué es una curva de Bézier cúbica?

Una curva definida por 4 valores de control, utilizada por las transiciones y animaciones CSS para controlar la velocidad de cambio a lo largo del tiempo. El 'ease' del navegador es cubic-bezier(0.25, 0.1, 0.25, 1).

¿Qué es el 'overshoot'?

Cuando la curva de suavizado excede 0 o 1 (valores y de control 1), la animación 'rebota' más allá de sus puntos finales. Útil para UIs divertidas.

¿Hay ajustes preestablecidos disponibles?

Sí, los ajustes preestablecidos comunes (linear, ease, ease-in, ease-out, ease-in-out) más algunas curvas personalizadas populares.

¿Es gratuito el editor?

Sí, totalmente gratuito, sin necesidad de registrarse.

Color y Diseño

Editor de Cubic Bezier

Editor gratuito de cubic-bezier. Diseña curvas de easing CSS visualmente con manejadores de arrastre, preajustes y vista previa de animación en vivo. Copia CSS para transiciones y animaciones.

Runs in your browser

Cubic-bezier editor

x10.25

y10.1

x20.25

y21

CSS

transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);

Nota del editor

Understanding · Time, but with feeling.

Este capítulo en profundidad está disponible solo en inglés por el momento. La herramienta de conversión de arriba funciona en tu idioma; el artículo explicativo extenso aún no se ha traducido.

Preguntas frecuentes

Quick answers.

›What's a cubic-bezier?

A curve defined by 4 control values — used by CSS transitions and animations to control the rate of change over time. The browser's 'ease' is cubic-bezier(0.25, 0.1, 0.25, 1).

›What's overshoot?

When the easing curve exceeds 0 or 1 (control y-values < 0 or > 1), the animation 'bounces' past its endpoints. Useful for playful UIs.

›Are presets available?

Yes — common presets (linear, ease, ease-in, ease-out, ease-in-out) plus a few popular custom curves.

›Is the editor free?

Yes — fully free, no signup.

La gente también busca

Herramientas relacionadas

More in this room.

Ver todo en Color y Diseño