Curvas cubic-bezier
La curva, como una tabla que de verdad se puede leer.
- curva
- 0
Resultado
Type four numbers — 0.42, 0, 0.58, 1 — or pick one of the named curves.
Tus archivos se quedan en tu dispositivo
Esta herramienta se ejecuta por completo en tu navegador. Lo que pegas se procesa en tu dispositivo y nunca se envía a un servidor, así que puedes usarla con tokens, claves y textos sin publicar.
Cómo funciona
- Elige una curva con nombre, o escribe cuatro números.
- Lee la tabla: cuánto ha avanzado el movimiento en cada décima del tiempo.
- Pon la duración que vas a animar de verdad, para que los milisegundos signifiquen algo.
- Copia la función de temporización.
Preguntas frecuentes
- ¿Por qué una tabla y no una curva dibujada?
- Porque la pregunta casi siempre es «¿va demasiado lento al principio?» o «¿llega demasiado de golpe?», y una tabla de progreso contra tiempo responde justo a eso. Una curva dibujada queda bonita y te deja igualmente adivinando los milisegundos.
- ¿Qué significan los cuatro números?
- Dos puntos de control: x1, y1, x2, y2. Las x son tiempo y tienen que estar entre 0 y 1. Las y son progreso y pueden salirse de ese rango: eso es justamente lo que hace que una curva se pase y vuelva.
- ¿Cuál debería usar?
- Para algo que entra, ease-out: rápido al principio y posándose al final. Para algo que sale, ease-in. ease-in-out para un desplazamiento entre dos sitios. Lineal para un indicador que gira, y para casi nada más.
- ¿Qué es una curva back?
- Una que se pasa del destino y vuelve: el pequeño rebote que hace que un diálogo parezca físico. Úsala en movimientos pequeños y rápidos; en uno grande se lee como un error.
- ¿Se envía algo a un servidor?
- No. Funciona en tu navegador, así que lo que escribas se queda en tu ordenador.
Herramientas relacionadas
◒ Generador de degradados CSS Colores por un lado, una declaración por el otro. ◒ Generador de box-shadow CSS La declaración, no un lienzo que arrastrar. ◒ Formateador CSS Una declaración por línea, o todo el archivo en una. ◒ Conversor de color HEX, RGB, HSL y CMYK, más la relación de contraste que decide la legibilidad.