CSS动画速度控制：transition-timing-function详解

CSS中的transition-timing-function并非控制动画快慢的“总时长开关”，而是精妙调节变化节奏的“节拍器”——它在transition-duration设定的时间框架内，决定每一帧如何加速、减速或匀速推进，从而让动画从生硬变得自然流畅；理解它与duration的本质分工（一个管“怎么动”，一个管“动多久”）、掌握ease、linear、ease-in-out及自定义cubic-bezier的视觉差异、避开属性不可过渡、优先级覆盖等常见失效陷阱，并认清其与animation-timing-function在响应模式和复杂节奏支持上的根本区别，是写出专业级交互动画的关键一步。

transition-timing-function 控制的是“变化过程”，不是“总时长”

很多人调了 transition-duration 又改 transition-timing-function，发现动画“还是太快”，其实是混淆了两个概念：transition-duration 决定动画播多久（比如 0.3s），而 transition-timing-function 决定这 0.3 秒里每一帧怎么分配——是匀速？先快后慢？中间卡一下再冲？

它不改变总时间，只改变节奏分布。想让动画“看起来更慢”，不能靠调 timing function，得加 duration；想让它“更自然”，才轮到 timing function 出手。

常用值的实际行为差异：ease / linear / ease-in-out / cubic-bezier()

ease 是默认值，等价于 cubic-bezier(0.25, 0.1, 0.25, 1)，开头慢 → 中间快 → 结尾慢；linear 就是真匀速，容易显得机械；ease-in-out 开头结尾都缓，适合模态框淡入淡出。

• cubic-bezier(0.4, 0, 0.2, 1)（即 ease-in-out）比 ease 起始更柔和，但收尾更“稳”，适合按钮 hover 缩放
• cubic-bezier(0.33, 1, 0.68, 1) 是“缓出过冲回弹”效果，常用于菜单展开，但别用在表单验证提示上——用户会误以为状态没落定
• 用在线工具（如 cubic-bezier.com）调完记得复制完整 cubic-bezier(x1,y1,x2,y2)，少一个逗号就退化成 ease

transition-timing-function 不生效的三个典型原因

写了 transition-timing-function: ease-in 却没效果？大概率卡在这几个地方：

• 漏写了 transition-property 或写成了 all，结果其他属性（比如 color）也在动，干扰了节奏感知
• 触发 transition 的属性不是“可过渡属性”，比如 display、height（从 0 到 auto）、visibility —— 这些根本不会走 timing function
• CSS 优先级问题：后加载的样式或内联 style 覆盖了 timing function，用浏览器开发者工具检查 computed 栏里的 transition-timing-function 是否真被应用

和 animation-timing-function 的关键区别在哪

transition-timing-function 只作用于属性变化的“单次响应”，比如 hover 进去、focus 获取；而 animation-timing-function 是动画关键帧之间的插值规则，可以配合 @keyframes 做多段节奏（比如先缩放再旋转再透明度变）。

别试图用 transition 实现弹跳（bounce）效果——它最多支持一段贝塞尔曲线，而 bounce 需要多个关键帧+多次 timing function 切换，必须用 @keyframes + animation-timing-function。

真要用 transition 模拟轻量回弹，只能靠 JS 触发两次 class 切换（进→出→再进），但维护成本高，不如直接上 animation。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS动画速度控制：transition-timing-function详解》文章吧，也可关注golang学习网公众号了解相关技术文章。