淡入下滑动画必须同时使用 transform 和 opacity，仅用其一会导致重绘或无透明度变化；应避免 top/margin 等触发重排的属性，正确写法为 opacity 与 translateY 组合的 keyframes 或 transition，并注意硬件加速、缓动一致、时机控制及 iOS 抖动优化。
淡入下滑动画必须用 transform + opacity 组合
只用 opacity 会触发重绘，只用 transform 没有透明度变化，两者缺一不可才能实现性能好、视觉准的入场效果。浏览器对 transform 和 opacity 的动画是硬件加速的，其他属性（比如 top、margin）会强制走软件渲染，卡顿明显。
常见错误是写成这样：animation: slideIn 0.4s ease-out; 却在 @keyframes slideIn 里只改 top 或 margin-top —— 这会导致 layout 触发，尤其在列表批量入场时掉帧严重。
关键帧里 transform 必须用 translateY 而非 top/margin
transform: translateY() 是合成层操作，不改变文档流，不影响后续元素布局；而 top 需要定位上下文（position: relative/absolute），margin 会推挤兄弟元素，动画过程中可能造成意外位移或重排。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
@keyframes fadeInSlideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
-
from的translateY值建议控制在 -10px ~ -30px，太大显得突兀，太小看不出下滑感 - 避免写
transform: translateY(-20px) scale(0.95)这类多值叠加——除非真需要缩放，否则增加计算负担且易出错 - 不要在
from状态加visibility: hidden：它会跳过渲染，导致动画第一帧直接“闪”出来
动画触发时机：用 class 切换比 visibility + transition 更可控
用 JS 控制 element.classList.add('is-entering') 是最稳妥的方式。相比监听 visibility 变化或靠 transition 自动触发，class 方式能精准控制开始点，也方便配合 IntersectionObserver 做懒入场。
对应 CSS：
.my-element {
opacity: 0;
transform: translateY(-20px);
transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.my-element.is-entering {
opacity: 1;
transform: translateY(0);
}
- 务必给两个属性都写
transition，漏掉任意一个都会导致“半截动画”（比如只淡入不下滑，或只下滑不淡入） - 时间值和缓动函数必须完全一致，否则两属性动画节奏脱节，看起来像卡顿
- 如果元素初始就渲染在 DOM 中（非 JS 动态插入），需确保 HTML 加载完成后再加
is-enteringclass，否则可能错过首帧
移动端 Safari 的 opacity 动画抖动问题
iOS 15+ 上，纯 opacity 动画有时会出现轻微闪烁或锯齿，尤其背景为深色或有半透明叠加时。这不是 bug，而是 WebKit 渲染管线对 alpha 通道的优化策略导致。
缓解方法只有两个：
- 给动画元素加
backface-visibility: hidden（虽名字叫“背面”，实际是强制开启合成层） - 或者更稳妥：加
will-change: opacity, transform，但仅在动画前一刻设置，动画结束立刻移除，避免长期占用内存 - 别用
-webkit-transform: translateZ(0)：它在新版本 Safari 中已失效，且可能干扰 flex/grid 布局
复杂点在于：滚动中触发动画、快速连续入场、配合 backdrop-filter 时，上述抖动会放大。这时候得放弃纯 CSS，改用 requestAnimationFrame + element.animate() API 手动控制关键帧，才能真正稳住。
