Curvas cubic-bezier
La curva, como una tabla que de verdad se puede leer.
Los ejemplos sustituyen temporalmente la entrada y los ajustes. Puedes recuperar tu trabajo anterior.
0 caracteres
- curva
- 0
Resultado
Introduce cuatro números, como 0.42, 0, 0.58, 1, o elige una curva.
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.
Ejemplo
Ejemplo práctico — Curvas cubic-bezier
Elige una curva con nombre, o escribe cuatro números. Usa los datos y ajustes siguientes. Mantén los demás ajustes predeterminados de la página.
| Elemento | Valor |
|---|---|
| Entrada | 0.25, 0.1, 0.25, 1 |
| Salida 1 | cubic-bezier(0.25, 0.1, 0.25, 1) |
| Salida 2 | 300 ms → 80.2% |
| Salida 3 | 600 ms → 100% |
Estos cuatro valores describen ease. A los 300 ms de una animación de 600 ms, el progreso es aproximadamente del 80,2 %.
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.