transition-timing-function 控制动画每一帧的速度分布而非时长，决定运动节奏如匀速、先快后慢等；默认 ease 实为 cubic-bezier(0.25, 0.1, 0.25, 1)，非数学匀速。
transition-timing-function 改变的是什么
它不控制动画时长（那是
的事），而是决定“每一帧怎么动”——比如是匀速、先快后慢，还是中间突然卡一下再冲过去。浏览器默认用
，看着柔和，但实际是贝塞尔曲线
，不是数学意义上的匀速。
四种预设值的实际表现差异
别只记名字，要看它们在真实交互里的反馈：
：开头慢 → 中间快 → 结尾慢，适合模态框淡入，但按钮悬停会显得“犹豫”
：真匀速，适合进度条或 loading 动画，但 UI 按钮用它会生硬
：开头慢、结尾快，像物体从静止被弹出去，慎用于关闭类操作（用户会觉得“没关稳”）
：开头快、结尾慢，适合展开菜单，收尾有“落定感”，但开启动作容易显得突兀
cubic-bezier() 自定义曲线的坑
手调两个控制点看似自由，实际容易翻车：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
值必须在 0–1 范围内，超出（比如
）会被整个忽略，退回到
想模拟“先慢后快再慢”，不能简单拉两个点，得用工具（如
cubic-bezier.com
）试，肉眼调基本靠猜
移动端 Safari 对复杂贝塞尔支持弱，
这种三段式在 iOS 15 以下可能降级为
steps() 分步动画的适用场景
不是所有“变速”都要靠贝塞尔——数字计数器、打字效果、帧动画这类离散变化，
更准：
立即学习
“
前端免费学习笔记（深入）
”；
表示分 4 步，**第一步立刻跳变**（常用于 sprite 动画）
是等分 5 次，**最后一步才完成**（适合倒计时数字切换）
和
搭配时，必须确保属性本身支持离散变化（如
、
），对
用
会出视觉断层
过渡动画的“速度感”本质是时间分布 + 视觉反馈的组合，
和
解决的是完全不同的问题，混用或硬套预设值，比写错一个
更难排查。
transition-durationeasecubic-bezier(0.25, 0.1, 0.25, 1)easelinearease-inease-outcubic-bezier(0, 0, 1.5, 1)easecubic-bezier(0.17, 0.67, 0.83, 0.67)easesteps()steps(4, start)steps(5, end)transitionbackground-positiontransform: translateX()opacitysteps()cubic-bezier()steps()transition-property