Curvas de animación
Transiciones con buen ritmo
Curva
Arrastra los dos puntos del gráfico o escribe los valores. x se mantiene entre 0 y 1; y puede salirse para un efecto de rebote.
Modelos
Animación
Con la curva
Lineal (referencia)
Código
Valor
cubic-bezier(0.25, 0.1, 0.25, 1)
Transición
transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
Acerca de la herramienta
Este editor sirve para ajustar la función de temporización de una transición o animación CSS. Arrastras los dos puntos de control de una curva de Bézier sobre un gráfico, o escribes x1, y1, x2 e y2 con el teclado. x se mantiene entre 0 y 1, como exige CSS, mientras que y puede ir de -0,75 a 1,75 para conseguir un retroceso o un rebote.
Once modelos te dan un punto de partida: las palabras clave de CSS linear, ease, ease-in, ease-out y ease-in-out, además de curvas cúbica, cuártica, exponencial y con rebote. Una animación compara tu curva con un movimiento lineal con duraciones de 200 ms a 2 s. También puedes pegar un valor existente y copiar la función cubic-bezier o una línea transition lista para usar.
Cómo usarla
- Elige un punto de partida en «Modelos» o pega un valor existente en «Pegar un valor».
- Arrastra los puntos del gráfico o ajusta «Punto de control 1» y «Punto de control 2» con los campos numéricos.
- Elige una «Duración» y pulsa «Reproducir la animación» para comparar la curva con la referencia lineal.
- Copia el «Valor» cubic-bezier o la línea «Transición» y pégala en tu hoja de estilos.
Preguntas frecuentes
¿Por qué x está limitado entre 0 y 1?
En CSS, las coordenadas x de los dos puntos de control representan el tiempo y deben quedarse entre 0 y 1; si no, la función cubic-bezier no es válida. El editor limita x a ese intervalo, pero deja que y vaya de -0,75 a 1,75.
¿Cómo consigo un efecto de rebote?
Coloca un punto de control por encima de 1 o por debajo de 0 en el eje vertical: el elemento sobrepasa su posición final y luego vuelve. Los modelos «Out con rebote» e «In-out con rebote» muestran el resultado.
¿Qué valores se pueden pegar en el campo?
Una función cubic-bezier(x1, y1, x2, y2), con o sin el nombre de la función, o una palabra clave de CSS: linear, ease, ease-in, ease-out o ease-in-out. Si x1 o x2 se salen del intervalo de 0 a 1, el valor se rechaza con un mensaje.
¿Qué contiene la línea Transición copiada?
Una declaración del tipo transition: transform 600ms cubic-bezier(…);, con la duración elegida en la herramienta. Anima la propiedad transform, así que cámbiala por la propiedad que quieras animar, por ejemplo opacity.