Curva de flexibilización CSS estilo rebote
Diseñe una función de sincronización CSS cúbica-bezier() personalizada arrastrando dos puntos de control, obtenga una vista previa en vivo con una referencia lineal y luego copie el valor listo.
Resultado
Esta página abre el generador con x1=0.68, y1=-0.55, x2=0.265, y2=1.55 ya cargados: una curva de sobregiro que algunas bibliotecas de flexibilización etiquetan easyOutBack. El y1 negativo y el y2 arriba de 1 son exactamente la razón por la cual la vista previa de la animación a continuación retrocede más allá de su inicio y de su final antes de establecerse; arrastre cualquiera de los controladores o edite los números para hacer el efecto más fuerte o más suave.
Para ser honesto acerca de lo que es esto: una única curva cúbica-bezier() tiene solo dos puntos de control, por lo que puede aproximarse a un movimiento de sobrepaso y asentamiento, no un rebote físico genuino de múltiples rebotes con varios saltos decrecientes. Para un efecto de rebote de pelota literal, necesitarías múltiples fotogramas clave o segmentos de pasos() encadenados; esta curva es lo más cerca que puede estar una función de sincronización de transición simple en una línea.
Ese único sobrepaso sigue siendo exactamente lo que la mayoría de las IU quieren: un botón que sobresale ligeramente de su tamaño en reposo, un modal que se sobrepasa antes de asentarse, una tarjeta que salta a su lugar. Copie el valor tal como está para esa sensación ágil, o suavice y1 hacia 0 e y2 hacia 1 para volver a marcar el exceso.