用 transform: scale() 配合 @keyframes 实现页面加载时元素从小变大最稳定，避免 width/height 动画引发重排；初始用 scale(0.01) 而非 scale(0)，显式设 transform-origin: center，用 animation-fill-mode: forwards 锁定终态，并通过 js 添加动画类精确控制触发时机。
页面加载时元素从小变大，用 @keyframes + transform: scale() 最稳
直接上结论：别用 width/height 动画，用 transform: scale() 配合 @keyframes，性能好、兼容性高、不会触发重排。
常见错误是写成 from { width: 0; height: 0; } —— 这会导致 layout 波动，动画卡顿，尤其在低端设备上明显掉帧。
-
scale(0)初始状态要设为scale(0.01)而不是scale(0)，否则 Safari 和部分安卓 WebView 会跳过渲染或失真 - 必须加
transform-origin: center（默认值其实是center，但显式声明更保险） - 动画触发时机靠
animation-fill-mode: forwards锁定最终态，否则动画一结束就弹回原大小
animation 的触发时机：CSS 类名控制比 animation-delay 更可靠
很多人用 animation-delay: 0.1s 想等 DOM 就绪，结果发现有时快有时慢——因为 CSS 动画在样式计算完成时就启动了，和 JS 执行、图片加载无关。
真正可控的方式是：初始不加动画类，JS 在 DOMContentLoaded 或 requestAnimationFrame 里加类触发。
立即学习“前端免费学习笔记（深入）”；
- HTML 元素初始带
class="box"，但 CSS 里只定义.box.animate { animation: ... } - JS 中用
element.classList.add('animate')触发，可精确控制时机 - 避免用
body上的loaded类全局控制，容易误触其他动画
IE11 兼容要注意 transform 前缀和 @keyframes 写法
IE11 不支持无前缀的 @keyframes 和 transform，但只加 -ms- 前缀还不够。
- 必须同时写
@-ms-keyframes和@keyframes（两个规则） -
transform: scale(1)在 IE11 中需补-ms-transform: scale(1) - IE11 不支持
animation-fill-mode: forwards，得靠 JS 在动画结束时手动设style.transform = 'scale(1)' - 如果项目已放弃 IE，这节可跳过；但凡还挂着兼容要求，漏掉任一前缀都会白屏或不动
放大动画卡顿？检查是否意外触发了重绘
即使用了 transform，动画仍卡顿，大概率是别的 CSS 属性在“拖后腿”。
- 确认没同时动画
opacity+transform以外的属性（比如color、background-color），这些会强制开启合成层但吃 GPU - 父容器有
overflow: hidden且子元素 scale 超出边界时，Chrome 可能降级到软件渲染 - 动画元素层级太深（比如嵌套 8 层 div），建议用
will-change: transform提前提示，但别滥用——只在真正动画前一帧加，动画完立刻移除
最常被忽略的是 scale 的起始精度和动画结束后的状态保持：scale(0) 是个坑，forwards 在旧浏览器里不顶用，而 JS 控制类名看似多一步，其实省了无数调试时间。
