transition-duration必须显式设置非零值，否则为0s导致动画失效；按钮交互最自然区间是0.2s～0.4s，不同属性需差异化配置，避免all简写和负值，并通过DevTools验证computed值。
transition-duration 必须显式写非零值，否则等于没写——浏览器默认是 0s，动画根本不会动。
transition-duration 写多少才不突兀
按钮类交互最自然的区间是 0.2s～0.4s：低于 0.15s 人眼基本感知不到，像闪屏；超过 0.6s 就开始拖沓。这不是主观感受，而是受人眼视觉反馈阈值（约 100ms）和 UI 响应心理预期共同约束的结果。
- 纯色按钮背景变色：
0.2s～0.25s，强调即时响应 - 带
transform的位移或缩放：0.3s更合适，稍缓一点反而增强动效感 - 渐变背景按钮：不能只靠
background-color过渡，得用background-image+animation，此时transition-duration不起作用，别混用 - 阴影或边框颜色变化：
0.25s为宜，太快会显得“弹跳”，太慢削弱反馈
多个属性过渡时 duration 怎么配
常见错误是写成 transition: all 0.3s; —— 看似省事，实则埋雷：不支持过渡的属性（比如 display、z-index）会被强行纳入计算，徒增开销，且无效；更糟的是，它会覆盖后续单独写的 transition-duration 声明。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 推荐按需列出属性，显式配时长：
transition: background-color 0.25s, transform 0.3s, opacity 0.2s; - 如果多个属性用同一时长，可以简写为：
transition: background-color 0.25s, transform 0.25s; - 避免混用简写和子属性：
transition: background-color 0.3s;和transition-duration: 0.5s;同时存在时，后者会被前者覆盖 - 负值（如
-0.1s）直接让整条transition声明失效，浏览器会忽略该行
transition-duration 不生效？先盯紧 DevTools
调不出来时，90% 的问题出在“以为写了，其实没生效”。打开浏览器 DevTools → Elements → Styles 面板，直接看 computed 值里的 transition-duration 和 transition-property，比反复改代码快得多。
立即学习“前端免费学习笔记（深入）”；
- 检查
transition-duration最终值是不是0s（哪怕你写了0.3s，也可能被层叠规则覆盖） - 确认
transition-property是否真包含你想动的那个属性（比如写了color却去改background） - 状态变化是否“可动画”：从
height: 0到height: auto不触发过渡；改用max-height或 JS 测量后设死值 - 值没变也白搭：比如
color: inherit→color: inherit，或从#333到#333，浏览器认为无变化，不触发
真正卡住人的，从来不是语法对不对，而是 transition-duration 和 transition-property 的绑定关系是否成立，以及浏览器对“可动画值”的判定是否符合预期。动手前，先看 computed 值，比猜强十倍。
