Springs and bounces in native CSS
В CSS появилась новая функция linear() (не путать с существующей linear), которая позволяет создавать сложные анимации, включая пружинящие и отскакивающие эффекты, без JavaScript. Вместо математических крив Безье эта функция использует заданные точки для построения кривой ускорения, соединяя их прямыми линиями. Это открывает возможности для создания физических эффектов, таких как пружины и отскоки, прямо в CSS.
Функция принимает набор значений от 0 до 1 (или за их пределами для создания эффекта перелёта), где каждое число представляет точку на графике прогресса анимации. В отличие от кривых Безье, она позволяет моделировать более сложные физические движения. Поддержка браузерами составляет около 88% на октябрь 2025 года. Однако для точного воспроизведения сложных пружинящих движений может потребоваться больше точек, чем стандартные 11, чтобы избежать роботизированного движения между дискретными позициями.