transition-property 必须显式指定，不能用 all；transition-duration 不可省略，否则动画失效；多属性需严格对齐顺序；timing-function 推荐 cubic-bezier() 精准调速；delay 仅控制起始时间，非总时长。
transition-property 必须显式指定，不能靠 all 蒙混过关
很多初学者写 transition: all 0.3s，结果改了 transform 或 opacity 却没动画——不是属性不支持，而是部分浏览器（尤其是旧版 Safari、Android WebView）对 all 的解析不一致，可能跳过某些属性或触发重绘开销。
真正可控的做法是明确列出你要过渡的属性：
transition-property: opacity, transform, background-color;- 多个属性用英文逗号分隔，**不能加引号**，否则整条声明失效
- 避免写
transition-property: "opacity, transform"—— 这是非法语法 -
display、z-index、height（当值为auto时）等不可插值属性，无论怎么列都不会动
transition-duration 是硬门槛，缺了就等于没写 transition
transition-duration 不是可选参数。只写 transition-property: opacity 而不设时间，浏览器按默认 0s 处理，效果就是“瞬间切换”，毫无过渡可言。
常见错误和应对：
- 误以为简写里可以省略时间 →
transition: opacity;无效，必须带单位：0.2s或200ms - 多属性不同持续时间要严格对齐顺序：
transition: width 0.4s, opacity 0.2s;—— 第一个时间对应第一个属性，错位会导致意外行为 - 移动端注意：过短（如
50ms）可能感知不到，过长（如1.5s）易被用户认为卡顿
timing-function 别只用 ease，cubic-bezier() 才是调速关键
ease（慢-快-慢）是默认值，但按钮悬停、菜单展开这类交互往往需要更精准的节奏控制。比如快速响应后缓收，或先稳再弹。
实操建议：
- 用
cubic-bezier(0.2, 0.8, 0.4, 1)模拟“轻快入场+柔和收尾”，比ease-out更自然 - 避免滥用
linear：纯匀速在 UI 中显得机械，仅适合进度条、加载指示器等场景 - 调试时打开 Chrome DevTools → “Animations” 面板，拖动贝塞尔曲线手柄实时预览效果
- 不要写
transition-timing-function: cubic-bezier(0.2, 0.8, 0.4);—— 少一个参数会整个函数失效
transition-delay 容易被当成“总时长”，其实它只管“起跑线”
transition-delay: 0.3s 的意思是“等 0.3 秒再开始动画”，不是“动画总共耗时 0.3 秒”。这点混淆会导致 JS 控制类名时动画错拍、多个属性交错混乱。
典型使用场景：
- 实现卡片悬停时先缩放再变色：
transform 0.2s, background-color 0.2s 0.1s（后者延迟 0.1s 启动） - 负延迟（如
-0.1s）可让动画从中间帧切入，适合循环播放或衔接上一动画 - JS 动态添加 class 后立即读取
offsetHeight强制 reflow，否则延迟可能被浏览器合并忽略 - 慎用于
:hover触发：用户快速移入移出时，未完成的 delay 会堆积，造成卡顿感
最常被忽略的一点：四个子属性之间没有隐式依赖，transition-property 和 transition-duration 必须同时存在才有效；而 transition-delay 和 transition-timing-function 缺失时会回退到默认值，但前两者一旦漏掉，整个过渡就静音了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
