Conversor de colores
Convierte HEX, RGB y HSL con transparencia, previsualiza el color y copia valores CSS listos para usar.
Editor de curvas cubic-bezier CSS
Ajusta dos puntos de control, prueba la transición y genera una función de aceleración cubic-bezier.
X se limita a 0–1; Y puede superar ese intervalo. Arrastra o usa las flechas, con Mayús para pasos mayores.
CSS
Acerca de esta herramienta
Afina la aceleración o el sobrepaso de una transición observando curva y movimiento.
Cómo se usa
Elige un ajuste habitual, arrastra los puntos de control o escribe X1, Y1, X2 e Y2. Puedes usar las flechas y Mayús para ajustar los puntos. Configura la duración de la prueba, pulsa reproducir y detén el movimiento cuando quieras. Después copia o descarga el CSS.
X admite 0–1 e Y admite −2–3, lo que permite anticipación y sobrepasar el punto final. La exportación incluye solo la declaración de aceleración, sin la duración de prueba ni una animación completa. Si el sistema solicita movimiento reducido, no se reproduce el desplazamiento, pero puedes editar y exportar.
Preguntas frecuentes
¿Se exporta una animación completa?
Solo transition-timing-function. La duración y las propiedades animadas se configuran en la hoja de estilos. x va de 0 a 1; y, de −2 a 3.
¿Por qué Reproducir no muestra movimiento si la curva es válida?
La vista previa respeta el ajuste de reducción de movimiento del sistema. Si está activo, no reproduce la animación de desplazamiento, pero puedes seguir editando y exportando la curva. En caso contrario, comprueba que la duración esté entre 100 y 5 000 ms. Esa duración solo afecta a la vista previa.
Herramientas relacionadas
Se abre en una pestaña nueva
Comentarios
0