Generador de curvas Bézier cúbicas
Da forma a la sensación de una animación arrastrando dos puntos de control sobre una curva y viendo cómo elementos reales se mueven a su ritmo. Una función cubic-bezier es lo que convierte una transición plana y mecánica en algo que acelera, se asienta o se pasa de largo como lo hace el buen movimiento, y ver la curva junto al movimiento hace evidente esa relación. Parte de las palabras clave de CSS o de un easing con nombre, y luego tira de los tiradores hasta que la temporización coincida con lo que tienes en mente. Las demos de posición, escala y opacidad se reproducen en bucle para que compares cómo se lee la misma curva en distintas propiedades, y la salida es una función de temporización lista para pegar en transiciones o animaciones, calculada por completo en el navegador.
- Arrastra dos puntos de control y observa cómo la curva de easing se actualiza junto a una vista previa del movimiento en vivo
- Parte de las palabras clave de CSS o de easings con nombre como easeOutBack, y luego ajústalo a mano
- Ve demos de posición, escala y opacidad para juzgar una misma curva en varias propiedades
- Pásate del rango de 0 a 1 para lograr easings tipo back con rebote, no solo rampas suaves
- Copia una función de temporización lista para transiciones o animaciones, calculada en el navegador
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); /* shorthand */ transition: all 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
Resumen
Coloca la curva de easing y el movimiento que produce uno al lado del otro, para que la temporización sea algo que sientes y ajustas en lugar de una cadena de cuatro números que retocas a ciegas en una hoja de estilos.
- 01
Edición directa de la curva
Arrastra los dos puntos de control para remodelar la aceleración y la desaceleración, o escribe valores exactos cuando necesites reproducir una curva de una especificación de diseño.
- 02
Movimiento en vivo en varias propiedades
Las demos en bucle de posición, escala y opacidad muestran cómo se lee de forma distinta la misma curva cuando impulsa el movimiento, el tamaño o el fundido.
- 03
Palabras clave y easings con nombre
Empieza desde linear, ease, ease-in-out o un easing con nombre como easeOutCubic y easeInOutBack, y luego refina en lugar de partir de cero.
- 04
Rebote y sensación de resorte
Los puntos de control pueden salir de la franja de 0 a 1, así que los easings back que se pasan de largo y se asientan son tan fáciles de construir como las rampas suaves.
- 05
Una línea de referencia lineal
Una línea recta tenue y un fantasma lineal en la vista previa dejan claro cuánto se aparta tu curva de un movimiento constante y sin vida.
- 06
Salida limpia y lista para copiar
El resultado es una función de temporización cubic-bezier estándar más un ejemplo abreviado de transición o animación, listo para pegar en cualquier hoja de estilos.
Cómo usarla
Convierte una sensación vaga de cómo debe sentirse el movimiento en una función de easing exacta, tanto si reproduces un diseño como si ajustas por intuición.
- 01
Elige un punto de partida entre las palabras clave de CSS o un easing con nombre cercano a la sensación que buscas.
- 02
Arrastra los puntos de control de inicio y fin para ajustar cómo acelera y desacelera el movimiento.
- 03
Para un efecto tipo resorte, tira de un punto de control por encima o por debajo del recuadro para que la curva se pase de largo.
- 04
Fija la duración y observa las demos de posición, escala y opacidad hasta que la temporización se sienta bien.
- 05
Elige transición o animación y luego copia la función de temporización en tu hoja de estilos.
Detalles
El movimiento es parte de una interfaz, no una decoración encima, así que un editor de easing tiene que corresponderse con la sintaxis real de cubic-bezier y mostrar el resultado con honestidad.
- Dos puntos de control arrastrables se corresponden directamente con los cuatro números de una función cubic-bezier
- Las entradas numéricas aceptan valores exactos para reproducir una curva de una herramienta de diseño o una especificación
- Los puntos de control pueden pasarse del rango de 0 a 1 para construir easings tipo back y resorte
- Los grupos de ajustes predefinidos cubren las palabras clave de CSS y un conjunto completo de easings con nombre, de sine a back
- Cada ajuste predefinido muestra una miniatura de la curva para reconocer su forma antes de aplicarla
- Las demos de posición, escala y opacidad se reproducen juntas en bucle para comparar la curva entre propiedades
- Un fantasma lineal y una línea de referencia diagonal muestran cuánto se aparta la curva de la velocidad constante
- Una duración ajustable revela cómo se siente la misma curva a tiempos rápidos y lentos
- La salida cubre tanto la declaración timing-function como una forma abreviada de transición o animación
- Todo se ejecuta localmente en el navegador, así que el diseño de movimiento del trabajo sin publicar sigue siendo privado
Casos de uso
El easing es lo que separa el movimiento que se siente diseñado del que se siente un valor por defecto. La curva adecuada depende de qué se mueve y por qué, y probarla contra elementos en vivo es la forma más rápida de decidir.
-
Transiciones de botones y hover
Un ease-out corto da a botones y enlaces una sensación ágil y viva al pasar el cursor y al pulsar, sin parecer lento ni robótico.
-
Modales y popovers
Las entradas suelen leerse mejor con un ligero rebote, mientras que las salidas se mantienen rápidas y lineales, así los paneles se sienten vivos al entrar y decididos al salir.
-
Menús y acordeones
Expandir y contraer secciones se beneficia de una curva ease-in-out para que los cambios de altura empiecen y terminen con suavidad en lugar de saltar.
-
Avisos y notificaciones
Un easing back que se pasa ligeramente de largo atrae la vista a un aviso entrante y luego lo asienta en su sitio sin resultar brusco.
-
Transiciones de página y de ruta
Las curvas ease-in-out suaves en movimientos más grandes mantienen la navegación entre vistas con una sensación continua en lugar de abrupta.
-
Indicadores de carga y progreso
Los indicadores en bucle y las barras de progreso necesitan un easing bien elegido para que el movimiento repetido se sienta estable en lugar de mecánico.
-
Reproducir una especificación de diseño
Pega los valores exactos de los puntos de control de una herramienta de diseño para reproducir una curva de movimiento con precisión en CSS para el handoff.
-
Construir un sistema de movimiento
Fija un conjunto reducido de curvas de easing reutilizables para que la animación de todo el producto comparta una misma sensación de temporización coherente.
Ver también
El movimiento se apoya sobre la maquetación, así que fija primero la estructura con Generador de Flexbox y Grid y, cuando una transición también cambia la elevación, combina el easing con la profundidad de Generador de sombras para que el movimiento y la sombra cambien juntos en vez de estorbarse.
Buenas prácticas
El easing es fácil de exagerar, así que unos pocos hábitos mantienen el movimiento con intención y coherencia en lugar de recargado o molesto.
- Usa ease-out para lo que entra o responde a una entrada, ya que rápido-luego-lento se siente ágil y natural.
- Usa ease-in para lo que sale de la pantalla, donde lento-luego-rápido se lee como un elemento que acelera al alejarse.
- Reserva las curvas de rebote y resorte para los momentos que merecen atención, no para cada transición de la página.
- Mantén las duraciones cortas para cambios pequeños de la interfaz, en torno a 150 a 300 ms, para que siga siendo ágil de usar.
- Ajusta la curva a la distancia recorrida, porque el mismo easing se siente distinto en movimientos pequeños y grandes.
- Estandariza unas pocas curvas con nombre en lugar de una cubic-bezier única para cada componente.
- Respeta las preferencias de movimiento reducido atenuando o eliminando los movimientos grandes para quienes lo solicitan.
- Prueba la curva a la duración y el tamaño reales, ya que una temporización que se siente bien en una demo puede sentirse lenta en contexto.
Limitaciones
Esta herramienta se centra en la temporización cubic-bezier para CSS, así que algunas áreas de movimiento relacionadas quedan fuera de alcance de forma intencionada.
- Produce curvas cubic-bezier. La temporización por pasos con la función steps() sigue una sintaxis distinta y no se genera aquí.
- El cubic-bezier de CSS exige que ambos valores x se mantengan entre 0 y 1, así que los tiradores horizontales se limitan a ese rango.
- Genera una función de temporización, no keyframes completos. Las propiedades y los valores que se animan se definen en tu propio CSS.
- La vista previa usa elementos de demostración fijos, así que confirma la sensación en tus componentes reales a su tamaño y distancia reales.
- La física de resortes de las librerías de animación puede aproximarse con el rebote, pero no es idéntica a una curva cubic-bezier.
- La fluidez percibida también depende de la tasa de fotogramas y de qué más se está repintando, algo que este editor no mide.
Preguntas frecuentes
Preguntas que surgen con más frecuencia al dar forma a curvas de easing y convertir una idea de movimiento en CSS listo para producción.
¿Qué es una curva de easing cubic-bezier?
Es una función que mapea el tiempo al progreso usando dos puntos de control. Al doblar la curva controlas cómo una animación acelera, desacelera o se pasa de largo, en lugar de moverse a un ritmo constante.
¿El CSS generado está listo para producción?
Sí. La salida es una función de temporización cubic-bezier estándar y puede pegarse en declaraciones de transición o animación en cualquier hoja de estilos sin cambios.
¿Cuándo debo usar ease-in frente a ease-out?
Usa ease-out para elementos que entran o reaccionan a una entrada, ya que desaceleran hasta asentarse. Usa ease-in para elementos que salen, ya que aceleran al alejarse. ease-in-out va bien para movimientos que empiezan y terminan en pantalla.
¿Cómo hago un efecto de rebote o resorte?
Arrastra un punto de control por encima o por debajo del recuadro de edición para que la curva se pase de su valor final, lo que crea el movimiento de pasarse-y-asentarse que se ve en easings tipo resorte como easeOutBack.
¿Por qué los valores X están limitados y los Y no?
CSS solo permite que los valores X de cubic-bezier, que representan el tiempo, se mantengan entre 0 y 1. Los valores Y, que representan el progreso, pueden salir de ese rango para crear el rebote.
¿Genera también keyframes?
No. Genera la función de temporización. Tú defines qué se anima, como transform u opacity, en tus propias reglas de transición o keyframes y le aplicas la curva.
¿Puedo reproducir una curva exacta de mi herramienta de diseño?
Sí. Escribe los cuatro valores de los puntos de control directamente en las entradas numéricas para reproducir una curva cubic-bezier concreta de un archivo de diseño o una especificación.
¿Se sube algo mientras edito?
No. La edición de la curva, la vista previa y la generación de CSS se ejecutan localmente en el navegador, así que la herramienta es segura para interfaces de producto sin publicar y diseño de movimiento confidencial.
Herramientas relacionadas
La temporización es una capa de una interfaz pulida. Con el easing decidido, vuelve a la maquetación y la profundidad para que la estructura, la elevación y el movimiento se lean como parte de un mismo diseño meditado.