transition-timing-function 控制过渡中间变化的加速度分布，不改变总时长；常用值包括 ease、linear、ease-in、ease-out、ease-in-out 及 cubic-bezier() 自定义曲线，多属性需逗号分隔并严格对应，且应优先使用 transform 避免重排卡顿。
transition-timing-function 控制过渡快慢节奏
过渡效果“快慢不一”不是靠调 duration，而是靠 transition-timing-function 决定中间变化的加速度分布。它不改变总时长，只改每一帧怎么动——比如按钮 hover 变色，用 ease-in 就是慢慢起速，linear 就是匀速，ease-out 则是快结束时明显放缓。
常见内置值直接写名字就行：
-
ease（默认）：先慢 → 快 → 慢，适合大多数交互 -
linear：全程匀速，机械感强，慎用于悬停类操作 -
ease-in：起始几乎不动，后半程加速，适合“弹出式”入场 -
ease-out：起始快，结尾明显减速，适合收尾动作（如菜单收回） -
ease-in-out：两端缓、中间快，比ease更对称，适合对称状态切换
cubic-bezier() 自定义非线性曲线
内置函数不够用？cubic-bezier() 是唯一标准方式。它接收四个参数：cubic-bezier(x1, y1, x2, y2)，本质是贝塞尔曲线在时间-进度坐标系中的控制点。x 值必须在 0–1 之间，y 值可超出（实现“回弹”或“过冲”）。
实操建议：
- 调试优先用在线工具，比如
https://cubic-bezier.com，拖动锚点实时预览 - 想模拟弹簧效果，试试
cubic-bezier(0.25, 0.46, 0.45, 0.94)（轻微回弹） - 避免 y 值过大（如 >1.5），否则动画会“飞出去”，视觉失控
- 不要把
cubic-bezier(0,0,1,1)当作linear的等价写法——它在部分旧版 Safari 中有渲染差异，仍建议直接写linear
多个属性配不同 timing-function 怎么写
一个元素上多个属性过渡速度不同，不能只写一个 transition 简写值。必须拆开或用逗号分隔，且顺序严格对应。
比如让缩放快启动、透明度慢收尾：
.card {
transition: transform 0.3s ease-out,
opacity 0.5s ease-in;
}
.card:hover {
transform: scale(1.05);
opacity: 0.9;
}
注意点：
- 如果只写
transition: all 0.4s ease;，所有属性都套同一个函数，失去控制粒度 -
transition-property和transition-timing-function不支持“一对多”映射，必须一一配对 - 浏览器按逗号分割后的顺序，依次匹配
transition-duration和transition-timing-function，错位会导致函数被忽略
容易被忽略的兼容性与性能坑
transition-timing-function 本身兼容性极好（IE10+、所有现代浏览器），但实际效果是否“如预期”，取决于你过渡的属性是否触发重排（reflow）。
典型陷阱：
- 对
width/height/margin过渡 +ease-in-out，动画过程中会反复重排布局，卡顿明显，尤其低端设备 - 想实现“慢入慢出”的位移效果，应改用
transform: translateX()+ease-in-out，走合成层，GPU 加速 -
steps()是离散函数（比如翻页、打字机效果），但它和cubic-bezier()互斥，不能混用在一个 transition 声明里 - JavaScript 动态修改样式时，若在同一次事件循环中连续设值（如先改
opacity再改transform），可能跳过过渡，需用getComputedStyle或setTimeout强制触发重排
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
