HTML5布局动画依赖CSS transition和transform，需避免对display等离散属性过渡；应使用opacity/visibility、max-height或transform替代；transition须明确property、duration、timing-function；transform位移性能优于top/left/margin。
HTML5 本身不提供布局过渡效果，真正起作用的是 CSS 的 transition 和 transform，配合 HTML5 语义化结构（如 <section>、<aside>）实现可维护的动画布局。直接写 transition 在 display 或 height: auto 上基本无效——这是最常踩的坑。
为什么 display: none <–> block 无法过渡
CSS transition 只对「可计算的数值型属性」生效，display 是离散值（none / block 等），浏览器不支持中间状态插值。
- 错误写法：
section { transition: display 0.3s ease; } - 正确替代方案：
- 用
opacity+visibility控制显隐（保留占位） - 用
max-height模拟height: auto过渡（设一个足够大的固定值，如max-height: 500px） - 用
transform: scaleY(0)配合overflow: hidden
- 用
transition 必须声明的三个关键参数
只写 transition: all 0.3s 看似省事，但容易引发意外重绘或性能抖动。应明确指定：
-
property：只对需要动的属性过渡，例如transition: opacity 0.2s, transform 0.2s -
duration：避免使用0或过小值（如0.01s），部分浏览器会跳过渲染 -
timing-function：慎用ease-in-out做布局切换，它在开头结尾减速，易造成“卡顿感”；推荐cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 iOS 的原生缓动）
用 transform 替代 top/left/margin 布局位移
直接修改 margin-top 或 left 触发 layout → paint → composite 全流程，而 transform: translateY() 仅触发 composite，性能高得多，且天然支持硬件加速。
立即学习“前端免费学习笔记（深入）”；
- 差：
.card { margin-top: 20px; transition: margin-top 0.3s; } - 好：
.card { transform: translateY(0); transition: transform 0.3s; }<br>.card.open { transform: translateY(-10px); } - 注意：
transform会创建新的层叠上下文（stacking context），可能影响z-index行为，若子元素需覆盖外部内容，得额外调整父容器的z-index
真正难的不是写几行 transition，而是判断哪些状态该交由 CSS 控制、哪些必须用 JS 触发（比如滚动中动态过渡），以及如何让动画节奏匹配用户操作意图——比如折叠面板快关慢开，就比来回一样快更符合直觉。
