transition-timing-function: linear 实现匀速过渡，但需确保属性支持插值且值真实变化；常见失效原因包括属性不支持（如display）、初末值类型不一致或未真正改变。
直接用 transition-timing-function: linear 就能实现匀速过渡，但必须确保过渡属性本身支持插值、且值有实际变化——否则动画根本不会触发。
为什么 hover 或 class 切换后过渡没动？
常见原因是：目标属性值未真正改变，或用了不支持过渡的属性。
-
display、height（设为auto时）、font-size（某些旧浏览器）等属性无法被transition插值，改了也没动画 - 颜色值写成
inherit或transparent而不是具体色值（如#333），会导致浏览器无法计算中间状态 - 初始和结束状态的值类型不一致，比如从
10px变到1rem，部分浏览器会放弃过渡 - 父元素设置了
overflow: hidden且子元素transform超出边界，可能触发渲染截断，看起来像“卡住”
linear 和其他缓动函数的实际区别在哪？
它控制的是“单位时间内的变化量是否恒定”。比如 transform: translateX(0) → translateX(200px) 持续 1 秒：
-
ease（默认）：前 0.2 秒只走约 10px，中间加速，最后减速 —— 有“呼吸感”，但不匀速 -
linear：每 100ms 正好走 20px，全程速度不变，适合模拟机械运动、进度条推进等场景 -
cubic-bezier(0, 0, 1, 1)等价于linear；而cubic-bezier(0.42, 0, 0.58, 1)是ease的精确表达
怎么让多个属性都匀速过渡，又互不干扰？
别偷懒全用 all，而是显式拆开写，避免意外覆盖：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
.card {
opacity: 1;
transform: scale(1);
transition-property: opacity, transform;
transition-duration: 0.4s, 0.4s;
transition-timing-function: linear, linear;
transition-delay: 0s, 0.1s;
}
这样 opacity 立即匀速淡出，transform 延迟 0.1s 后再匀速缩放，节奏可控。如果写成 transition: all 0.4s linear，所有属性都会按同一时间点开始、同一曲线执行，容易打架。
真正难的不是写 linear，而是判断哪些属性该用它——比如按钮悬停变色用 linear 显得生硬，但 SVG 图标旋转角度用 linear 才符合物理直觉；另外，移动端要注意 linear 在低帧率设备上更容易暴露卡顿，这时候反而要加一点 ease-out 缓冲。
