Generador de transiciones y easing CSS
Crea una regla de transición CSS a partir de curvas preestablecidas o puntos cubic-bezier personalizados, con un gráfico de texto del movimiento.
Generador de transiciones y easing CSS
Elige las propiedades que quieres animar, establece una duración y retardo, y esta herramienta genera la regla de transición para ti — en CSS simple o en un bloque de configuración Tailwind que puedes copiar directamente en tailwind.config.js. Cubre las curvas nombradas comunes (linear, ease, ease-in, ease-out, ease-in-out) más ease-out-back, una curva que sobrepasa su objetivo antes de estabilizarse, que no es una palabra clave CSS nativa y siempre necesita escribirse como cubic-bezier().
Debajo de la regla generada, un gráfico de texto traza el progreso de la curva en cada punto en el tiempo — desde 0 al inicio de la animación hasta 1 al final, con una barra para cada muestra para que veas la aceleración y cualquier sobrepaso sin abrir las herramientas de desarrollo. Cambia a "Custom cubic-bezier()" e ingresa tus propios cuatro puntos de control para previsualizar una curva que alguien te pasó, u otra que copiaste de una herramienta de diseño; el primer y tercer puntos deben mantenerse dentro de 0–1 en el eje temporal (es un requisito de CSS), pero los valores y pueden estar fuera de 0–1, que es exactamente cómo funcionan las animaciones de bounce y back.
El campo propiedades toma una lista separada por comas — transform, opacity, background-color, o una propiedad CSS personalizada como --panel-width — y la herramienta escribe una línea por propiedad para que la regla sea fácil de leer. Duración y retardo están en milisegundos; el número de filas del gráfico es ajustable de 2 hasta 41 para una lectura más gruesa o más fina de la curva.
Todo se ejecuta localmente en tu navegador: nada de lo que escribas se envía a ningún lado. Copia el resultado, descárgalo como un archivo .txt, o envía la salida directamente de vuelta a la entrada para seguir ajustándola.