Generador de Easing CSS
Generador online gratuito de easing CSS. Arrastra los puntos de control de cubic-bezier en una curva interactiva, elige entre 18 presets, mira una animación de bola en bucle y copia la función de temporización al instante.
¿Qué es una función de easing en CSS?
Una función de easing controla el ritmo con el que progresa una animación o transición a lo largo del tiempo. Un elemento no tiene que moverse a velocidad constante: puede arrancar despacio, acelerar, pasarse del objetivo y asentarse. En CSS se define con transition-timing-function o animation-timing-function.
¿Qué significan los cuatro números de cubic-bezier()?
cubic-bezier(x1, y1, x2, y2) define una curva mediante dos puntos de control. El primero da forma al inicio del movimiento y el segundo al final. X representa el tiempo en una escala de 0 a 1, e Y representa el progreso, donde 0 es el valor inicial y 1 el final.
¿Por qué Y puede salirse de 0 a 1 y X no?
X se asigna al tiempo real, así que un valor menor que 0 o mayor que 1 rompería la causalidad y la especificación lo prohíbe. Y es libre: por encima de 1 se sobrepasa el objetivo y por debajo de 0 se retrocede antes de avanzar; así consiguen su rebote los presets Back.
¿Qué diferencia hay entre ease, ease-in y ease-out?
ease es el valor por defecto del navegador, con arranque suave y aterrizaje suave; ease-in empieza lento y termina rápido; ease-out empieza rápido y desacelera; ease-in-out combina ambos. El generador incluye además sine, quad, cubic, quart, expo, back y material: 18 en total.
¿Cómo funciona la vista previa de la bola?
Dos bolas se repiten en bucle durante la duración indicada. La bola superior siempre se mueve con una función lineal como referencia, mientras que la inferior usa tu curva. La distancia entre ellas, que crece y se encoge, muestra exactamente lo que cambia tu easing.
¿Dónde pego el valor generado?
Úsalo como valor de transition-timing-function o animation-timing-function, por ejemplo transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. La herramienta devuelve la función cubic-bezier(...) pura, lista para cualquier regla.
¿Afecta la función de easing al rendimiento de la animación?
La función de temporización en sí es gratuita: solo remapea el progreso en el tiempo. El rendimiento depende de las propiedades que animes: transform y opacity son amigables con la GPU, mientras que animar propiedades de maquetación como width o top provoca reflows costosos sin importar el easing.
¿Puedo crear un efecto de rebote o elástico real?
Un único cubic-bezier puede sobrepasarse una vez, pero no puede producir los múltiples rebotes de un efecto bounce o elástico verdadero. Para eso encadena varios keyframes en @keyframes o usa la Web Animations API; el sobrepaso suave único es justo lo que cubic-bezier hace bien y lo que ofrece esta herramienta.
¿Se sube a algún servidor lo que hago aquí?
No. La curva se dibuja en un canvas local y la animación de vista prevía corre por completo en tu navegador. No se transmite nada a ningún servidor, por lo que el generador también funciona sin conexión una vez cargada la página.
Cómo usar Generador de Easing CSS
Esculpe curvas de easing de CSS visualmente en lugar de adivinar números. Arrastra los puntos de control, compara tu movimiento con una referencia lineal y copia el cubic-bezier terminado en un clic. Todo funciona localmente en tu navegador.
- Elige uno de los 18 preajustes como Ease Out, Expo Out o Back Out como punto de partida.
- Arrastra los dos tiradores de la curva: el eje X es tiempo y debe quedar entre 0 y 1; el eje Y es progreso y puede sobrepasarse.
- Ajusta con precisión las coordenadas exactas de P1 y P2 con los campos numéricos si necesitas exactitud.
- Ajusta el deslizador de duración y observa las dos bolas en bucle: la hueca siempre es lineal, la sólida usa tu curva.
- Copia el valor cubic-bezier generado en transition-timing-function o animation-timing-function.
Sube un tirador de Y por encima de 1 para un sobrepaso seguro, como cubic-bezier(0.34, 1.56, 0.64, 1): hace que botones y tarjetas se sientan elásticos sin ningún keyframe.
Herramientas relacionadas
- Generador de Gradientes CSS Crea impresionantes gradientes CSS visualmente. Genera gradientes lineales, radiales y cónicos con múltiples paradas de color, ángulos y posiciones. Copia código CSS listo para producción.
- Generador de Loaders CSS Generador de loaders CSS gratis: diez spinners de carga en CSS puro con control en vivo de tamaño, velocidad, grosor y color, y copia de HTML y CSS listos para pegar.
- Generador de Border Radius Creativo Generador de border radius creativo gratuito en línea. Arrastra 8 puntos o elige una forma blob para crear figuras CSS orgánicas y copiar el código al instante.
- Convertidor de Color Convertidor de color online gratuito. Convierte formatos HEX, RGB, HSL, HSV al instante con selector visual. 100% privado, funciona en tu navegador.
- Generador de Text Shadow CSS Generador online gratuito de text-shadow CSS. Apila varias capas de sombra con desplazamiento, desenfoque, color y opacidad, prueba presets como Neón, 3D o Retro y copia el CSS al instante.
- Generador de Clip Path CSS Generador online gratuito de clip-path CSS. Diseña formas polygon, circle, ellipse e inset con puntos arrastrables, vista previa en vivo y copia del código CSS en un clic.
- Embellecedor CSS Formatea y embellece código CSS al instante. Convierte CSS minificado en código legible y bien indentado con opciones personalizables.
- Minificador CSS Minificador CSS online gratuito. Comprime y optimiza código CSS al instante eliminando espacios, comentarios y caracteres innecesarios. Reduce el tamaño para mejor rendimiento web.