На главную
CSS-эффекты и графика
Easing и cubic-bezier
Функции плавности для CSS: библиотека готовых кривых и редактор своей. Любой пресет открывается в редакторе и правится дальше.
Нажмите на карточку, чтобы открыть кривую в редакторе.
Ключевые слова CSS
linear
ease
ease-in
ease-out
ease-in-out
Разгон (in)
cubic-bezier(0.12, 0, 0.39, 0)
cubic-bezier(0.55, 0.085, 0.68, 0.53)
cubic-bezier(0.32, 0, 0.67, 0)
cubic-bezier(0.7, 0, 0.84, 0)
Торможение (out)
cubic-bezier(0.61, 1, 0.88, 1)
cubic-bezier(0.25, 0.46, 0.45, 0.94)
cubic-bezier(0.33, 1, 0.68, 1)
cubic-bezier(0.19, 1, 0.22, 1)
Разгон и торможение
cubic-bezier(0.45, 0, 0.55, 1)
cubic-bezier(0.645, 0.045, 0.355, 1)
cubic-bezier(0.87, 0, 0.13, 1)
С возвратом (back)
cubic-bezier(0.6, -0.28, 0.735, 0.045)
cubic-bezier(0.175, 0.885, 0.32, 1.275)
cubic-bezier(0.68, -0.55, 0.265, 1.55)