正确实现 scale+opacity 动画需显式声明 from 状态（如 scale(0.7)、opacity(0)），元素选择器中预设初始样式，配合 animation: ... forwards；仅定义 to 会导致无动画，且须避免 font-size 缩放、冗余 will-change 及 IE/Safari 兼容遗漏。
用 @keyframes 定义 scale + opacity 动画时，起始状态必须设为 scale(0.8) 和 opacity(0)
直接从 scale(1) 开始不会产生“逐渐放大”效果；浏览器会把未声明的初始值当作 scale(1) opacity(1)，导致动画跳过入场过程。常见错误是只写终点：
@keyframes fadeInScale {
to {
transform: scale(1);
opacity: 1;
}
}这其实等价于 from { transform: scale(1); opacity: 1; }，毫无动画可言。
- 正确写法必须显式声明
from状态，例如：scale(0.7)、opacity(0) -
scale()值小于 1 才有收缩感，0.6–0.8 是较自然的入场起点 - 避免用
scale(0)：部分浏览器在 scale=0 时会跳过渲染，文字可能闪一下才出现
给元素加动画要同时设置 transform 和 opacity 的初始值
CSS 动画不会自动回退初始样式——如果元素没提前写 transform: scale(0.7) 和 opacity: 0，浏览器会在动画开始前先渲染原始尺寸和不透明度，造成“闪一下再动”的现象。
- 必须在元素选择器里预先写好初始状态：
.fade-in { opacity: 0; transform: scale(0.75); animation: fadeInScale 0.4s ease-out forwards; } -
forwards关键字不能省：否则动画播完会立刻跳回opacity: 0和scale(0.75) - 别依赖 HTML 加载顺序或 JS 插入时机来“抢在渲染前设样式”，CSS 初始值才是唯一可靠方式
transform 和 opacity 同时动画比只用 font-size 更高效
用 font-size 做缩放动画会触发重排（reflow），而 transform: scale() + opacity 属于合成属性（composited properties），由 GPU 加速，帧率更稳，尤其在低端设备上差异明显。
- 禁止这样写：
from { font-size: 12px; }→ 触发 layout，动画卡顿风险高 - 确保父容器没有
will-change: auto或强制开启 3D（如transform: translateZ(0)）——现代浏览器已自动优化transform/opacity，额外 hack 反而增加开销 - 如果文字需要响应式缩放，
scale()不影响流式布局，但font-size会影响行高、间距等，维护成本更高
IE11 和旧版 Safari 需要手动补全 -webkit- 前缀
虽然现在大多数项目已放弃 IE 支持，但如果目标用户仍含 IE11，@keyframes 和 animation 属性必须双写：
@-webkit-keyframes fadeInScale {
from {
-webkit-transform: scale(0.75);
transform: scale(0.75);
opacity: 0;
}
to {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.fade-in {
-webkit-animation: fadeInScale 0.4s ease-out forwards;
animation: fadeInScale 0.4s ease-out forwards;
}
注意：Safari 9–13.1 对 animation-timing-function 中的 ease-out 解析不一致，若发现收尾太急，可改用 cubic-bezier(0.25, 0.46, 0.45, 0.94) 替代。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：动画触发时机。CSS 动画在元素进入 DOM 并完成样式计算后立即启动，如果你用 JS 动态插入元素，得确保 class 是在元素挂载到 document 后**下一个 tick**再添加（例如用 requestAnimationFrame 包一层），否则可能因样式未 flush 而丢失首帧。
