“柔和”过渡的关键在于缓动函数、属性选择与浏览器重绘机制——需用cubic-bezier(0.25,0.46,0.45,0.94)替代ease，仅对opacity和transform做动画，避免reflow属性，并确保DOM状态可被浏览器识别。
直接用 transition 写出来不等于有“柔和”效果——90% 的生硬感来自缓动函数选错、属性组合不当，或浏览器没真正触发重绘。
为什么 transition 看起来“卡”或“突兀”
不是时间设长就柔和，关键在「变化节奏」是否符合人眼预期。默认的 ease 在中段加速过快，收尾太急；linear 又全程匀速，缺乏呼吸感。
- 避免用
transition: all 0.3s ease—— 它会把border-color、box-shadow甚至outline全拖进动画，视觉上反而杂乱 - 优先用
cubic-bezier(0.25, 0.46, 0.45, 0.94)：这是多数现代 UI 框架（如 Material Design）推荐的“缓入缓出”曲线，起始柔和、中段稳、收尾干净 - 如果只写
transition: opacity 0.3s，浏览器会自动补上ease，但你无法控制——显式声明才能确保一致
哪些 CSS 属性真能做出“柔和”过渡
不是所有属性都适合做柔和过渡。有些属性一动就重排（reflow），再好的缓动也救不了卡顿。
-
opacity和transform是唯二推荐的“安全区”：它们走合成层（compositor），不触发布局计算，GPU 加速下帧率稳定 -
background-color可以动，但深色/浅色切换时易显生硬；建议搭配opacity: 0.95微调，削弱对比冲击 - 绝对要避开：
height、width、margin、padding、font-size—— 它们强制浏览器同步计算布局，哪怕用了cubic-bezier也会掉帧 -
max-height可用于展开收起，但必须设具体值（如max-height: 0→max-height: 200px），max-height: auto不支持过渡
transition 失效的三个隐蔽原因
写了 transition 却没动画？大概率不是语法错，而是 DOM 状态没“被浏览器看见”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 起止值相同：比如
opacity: 1→opacity: 1，或transform: none→transform: translateX(0)，浏览器判定无变化，跳过动画 - 缺少重排机会：JS 中连续改样式（如先加 class 再读 offsetHeight）没留空隙，浏览器合并渲染，只拍到终态。补救：加
void el.offsetWidth或el.offsetHeight强制同步读取 - 元素不可绘制：
display: none、visibility: hidden、刚createElement未append到 DOM 的元素，transition直接静默失效
移动端和深色模式下的柔和陷阱
PC 上跑得顺的过渡，到手机上可能顿一下，或在深色模式下颜色跳变——这不是 bug，是渲染逻辑差异。
- iOS Safari 和部分安卓 WebView 默认压制
:hover，纯靠 hover 触发的过渡在首次点击前不生效。必须加touch-action: manipulation，并为触控准备:active或 JSclick替代方案 - 深色模式下，
background-color: #fff→#000的过渡在 OLED 屏上会因像素点开关不同步产生“灰阶闪烁”。建议用opacity+backdrop-filter: blur(2px)替代纯色切换 - 不要依赖
@media (prefers-reduced-motion)自动降级——很多用户没开这个设置，但实际仍敏感。可提供手动开关，用 JS 切换class="reduced-motion"并覆盖transition: none
真正决定“柔和”的，从来不是过渡时间多长，而是浏览器有没有在对的时机、用对的图层、按对的节奏画出每一帧。写完记得在真机上连点三次，看有没有残留 transform 或 opacity 值卡住——那才是最常被忽略的收尾问题。
