Visualizador de funciones de facilitación
Visualice, compare y genere funciones de suavización de CSS con un editor interactivo de curvas cúbicas-bezier SVG. Arrastre los dos puntos de control (P1, P2) en la curva para crear su propia aceleración personalizada, o elija entre más de 18 ajustes preestablecidos integrados que incluyen facilidad, rebote, elástico, atrás y la curva enfatizada de Material Design. Compare hasta 6 curvas de aceleración una al lado de la otra en la superposición de comparación, obtenga una vista previa del movimiento con un punto animado y copie el CSS listo para producción para las propiedades de transición y animación. Todo el procesamiento se ejecuta localmente en su navegador: completamente gratis, no es necesario registrarse.
Control Points
transition: all 0.4s ease;
animation: myAnim 0.4s ease;
Acerca de las funciones de facilitación de CSS
- Las funciones de suavización de CSS controlan la tasa de cambio durante una animación o transición. En lugar de una aburrida animación de velocidad constante, la relajación hace que el movimiento parezca natural: acelerar, desacelerar, rebotar o sobrepasarse. El tipo más común es cúbico-bezier(), definido por dos puntos de control (P1, P2) que dan forma a la curva desde el inicio (0,0) hasta el final (1,1).
- El editor SVG interactivo le permite arrastrar dos puntos de control en una cuadrícula de coordenadas. El eje X representa el tiempo (0 % al 100 % de la duración de la animación) y el eje Y representa el progreso (0 % al 100 % del cambio de propiedad). La forma de la curva entre estos puntos determina la relajación: las secciones empinadas significan cambios rápidos, las secciones planas significan cambios lentos.
- P1 (primera manija) controla la aceleración inicial; P2 (segunda manija) controla la desaceleración final. P1 cerca de la parte inferior derecha crea un comienzo lento que acelera. P2 cerca de la esquina superior derecha crea un comienzo rápido que se ralentiza. Los valores fuera del rango 0-1 (como y1=-0,5) crean efectos de exceso como rebote o salto.
- La aceleración, la duración y el retraso son propiedades de animación independientes. La duración controla cuánto tiempo se ejecuta la animación. Controles de retraso cuando comienza. La relajación controla el ritmo del movimiento dentro de esa duración. Una duración rápida con una relajación dramática crea un movimiento ágil y animado. Una duración lenta con una suave relajación crea transiciones suaves y elegantes.
Preguntas frecuentes
Una función de aceleración de CSS define la tasa de cambio de una propiedad a lo largo del tiempo durante una animación o transición. En lugar de moverse a una velocidad constante, la aceleración permite que la animación se acelere, desacelere, rebote o se sobrepase. El tipo más común es cúbico-bezier(), definido por cuatro valores que representan dos puntos de control que dan forma a la curva de relajación.
Una curva de Bézier cúbica tiene cuatro parámetros: x1, y1, x2, y2. P1 (x1, y1) controla cómo comienza la animación: determina la aceleración inicial. P2 (x2, y2) controla cómo termina la animación: determina la desaceleración final. Ambos puntos se ubican en una cuadrícula de coordenadas donde X = tiempo (0 a 1) e Y = progreso (0 a 1).
Cuando el valor Y de un punto de control cae por debajo de 0 o por encima de 1, la curva se sobrepasa, lo que significa que la propiedad animada va temporalmente más allá de su valor final. Esto crea efectos de rebote y resorte. Por ejemplo, Back In comienza retrocediendo ligeramente antes de avanzar.
La entrada fácil comienza lentamente y se acelera, lo que es bueno para los elementos que ingresan a la pantalla. La salida gradual comienza rápido y desacelera, lo que es bueno para los elementos que salen de la pantalla. Facilidad combina ambos: un comienzo suave y un final suave con una sección media más rápida.
Utilice la función cúbica-bezier() en su propiedad de transición o animación: transición: opacidad 0.3s cúbica-bezier(0.25, 0.1, 0.25, 1);. Los cuatro valores son x1, y1, x2, y2. Puede arrastrar los puntos de control en esta herramienta para encontrar la curva perfecta y copiar el valor CSS resultante.
Para la mayoría de las interacciones de la interfaz de usuario (estados de desplazamiento, modales, información sobre herramientas), se recomienda facilitar la salida: los objetos que comienzan rápido y se ralentizan se sienten receptivos y naturales. Para animaciones de entrada, utilice la entrada suave o la curva enfatizada de Material Design. Evite la interfaz lineal: se siente robótica.
Sí. Utilice valores arbitrarios: transición-[cubic-bezier(0.68,-0.55,0.27,1.55)] o agregue flexibilizaciones personalizadas a su tailwind.config.js en theme.extend.transitionTimingFunction.
Sí, todos los navegadores modernos admiten las flexibilizaciones cúbica-bezier() y de palabras clave (facilidad, entrada fácil, salida fácil, entrada fácil, lineal). Steps() también es ampliamente compatible con Chrome, Firefox, Safari y Edge.