CSS 缓动函数预览
内置 30+ 缓动函数,可视化曲线 + 实时动画预览
linear
线性匀速
linear
ease
默认缓动
ease
ease-in
缓入
ease-in
ease-out
缓出
ease-out
ease-in-out
缓入缓出
ease-in-out
easeInSine
正弦缓入
cubic-bezier(0.12, 0, 0.39, 0)
easeOutSine
正弦缓出
cubic-bezier(0.61, 1, 0.88, 1)
easeInOutSine
正弦缓入缓出
cubic-bezier(0.37, 0, 0.63, 1)
easeInQuad
二次方缓入
cubic-bezier(0.11, 0, 0.5, 0)
easeOutQuad
二次方缓出
cubic-bezier(0.5, 1, 0.89, 1)
easeInOutQuad
二次方缓入缓出
cubic-bezier(0.45, 0, 0.55, 1)
easeInCubic
三次方缓入
cubic-bezier(0.32, 0, 0.67, 0)
easeOutCubic
三次方缓出
cubic-bezier(0.33, 1, 0.68, 1)
easeInOutCubic
三次方缓入缓出
cubic-bezier(0.65, 0, 0.35, 1)
easeInQuart
四次方缓入
cubic-bezier(0.5, 0, 0.75, 0)
easeOutQuart
四次方缓出
cubic-bezier(0.25, 1, 0.5, 1)
easeInOutQuart
四次方缓入缓出
cubic-bezier(0.76, 0, 0.24, 1)
easeInQuint
五次方缓入
cubic-bezier(0.64, 0, 0.78, 0)
easeOutQuint
五次方缓出
cubic-bezier(0.22, 1, 0.36, 1)
easeInOutQuint
五次方缓入缓出
cubic-bezier(0.83, 0, 0.17, 1)
easeInExpo
指数缓入
cubic-bezier(0.7, 0, 0.84, 0)
easeOutExpo
指数缓出
cubic-bezier(0.16, 1, 0.3, 1)
easeInOutExpo
指数缓入缓出
cubic-bezier(0.87, 0, 0.13, 1)
easeInCirc
圆缓入
cubic-bezier(0.55, 0, 1, 0.45)
easeOutCirc
圆缓出
cubic-bezier(0, 0.55, 0.45, 1)
easeInOutCirc
圆缓入缓出
cubic-bezier(0.85, 0, 0.15, 1)
easeInBack
回拉缓入
cubic-bezier(0.36, 0, 0.66, -0.56)
easeOutBack
回拉缓出
cubic-bezier(0.34, 1.56, 0.64, 1)
easeInOutBack
回拉缓入缓出
cubic-bezier(0.68, -0.6, 0.32, 1.6)
easeInElastic
弹性缓入
cubic-bezier(0.5, -0.5, 0.5, 1.5)
easeOutElastic
弹性缓出
cubic-bezier(0.5, -0.5, 0.5, 1.5)