ease 是 css 默认缓动函数，等价于 cubic-bezier(0.25, 0.1, 0.25, 1.0)，呈先加速后减速的非匀速运动，模拟物理惯性，视觉更自然；误认其为匀速会导致起止停顿感。
ease 是什么，为什么它不是“匀速”
ease 是 CSS 过渡的默认缓动函数，等价于 cubic-bezier(0.25, 0.1, 0.25, 1.0)。它开头慢、中间快、结尾又慢——这种“先加速再减速”的节奏，模拟了真实物体的惯性运动，所以视觉上更自然。但很多人误以为 ease 是“匀速”，结果发现动画开头/结尾有停顿感，其实是它在刻意控制加速度。
常见误解场景：
- 用
ease做 loading 指示器旋转，结果转得不连贯（该用linear） - 弹窗淡入用
ease没问题，但做进度条填充时，用户会感觉“卡了一下才动起来”（起始加速度太低）
linear、ease-in、ease-out、ease-in-out 各自适合什么动作
这四个是预设关键词，背后都是固定贝塞尔曲线，区别只在加速度分布：
-
linear：速度恒定。适合机械感强、需要精确节奏的场景，比如仪表盘指针转动、倒计时数字切换、canvas 动画同步位移 -
ease-in：从静止缓慢启动，之后持续加速。适合“弹出式”入场（如 tooltip 浮层、下拉菜单），强调“刚出现”的轻量感 -
ease-out：高速进入后逐渐刹停。适合“收尾动作”，比如模态框关闭、抽屉面板收回，让人感觉“稳稳落定” -
ease-in-out：两头慢、中间快，比ease更对称。适合对称运动，如开关 toggle、折叠面板展开/收起，避免单侧突兀
什么时候必须手写 cubic-bezier() 而不是用预设
预设函数只有 5 种，而真实交互动效常需要微调节奏。比如：
立即学习“前端免费学习笔记（深入）”；
- 想让动画“更早发力”，把
ease-in的起始更柔和 → 改成cubic-bezier(0.1, 0.5, 0.3, 1) - 按钮 hover 缩放希望“快速响应+干净收尾”，
ease-out结尾太拖沓 → 用cubic-bezier(0.3, 0.7, 0.6, 1)加快衰减 - 长距离位移（如页面滚动锚点跳转）若用
ease，中段太快、两端太慢，用户易晕 → 可压平曲线：cubic-bezier(0.3, 0.3, 0.7, 0.7)
调试建议：在浏览器开发者工具里直接编辑 transition-timing-function 值，配合“动画检查器”（Animation Inspector）实时拖拽控制点，比凭空猜参数可靠得多。
性能与兼容性要注意的细节
所有缓动函数本身不消耗额外性能，但错误搭配会引发重排或触发非合成层动画：
- 用
ease或cubic-bezier()配合top/left位移 → 强制 Layout + Paint，掉帧明显。应改用transform: translateY() -
steps()函数（逐帧动画）和缓动函数互斥，不能混用；若需帧动画效果，直接用animation-timing-function: steps(4, end) - IE10+ 支持所有预设值，但旧版 Safari 对
cubic-bezier()的解析容错低，避免第四参数 > 1 或 cubic-bezier(0, 0, 0.5, 1.5) 在 Safari 9 会退化为ease）
真正容易被忽略的是：缓动函数只定义“时间到状态的映射”，它不改变动画时长、不决定是否触发硬件加速——这些得靠 transition-property 和属性选择来保障。
