实现顶部滑入动画需用@keyframes定义translateY(-100%)到0的位移，配合opacity变化；须合并原有transform、添加forwards保持终态，并优先使用transform/opacity避免重排。
用 @keyframes 定义从顶部滑入的位移路径
核心是让元素初始位置在视口上方，再平滑移动到目标位置。关键在于 translateY 的起始值必须为负（比如 -100% 或具体像素），终点为 0，否则看不出“滑入”效果。
常见错误是写成 from { transform: translateY(0); } —— 这样元素一开始就在原位，动画只是“抖一下”或根本不可见。
正确写法示例：
@keyframes slideInFromTop {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
给元素绑定动画时注意 transform 冲突
如果元素本身已有 transform: translateX(20px) 等声明，直接加 animation 会导致原有变换被覆盖——CSS 中 transform 不会叠加，后写的完全替代前写的。
立即学习“前端免费学习笔记（深入）”；
解决办法只有两个：
- 把原有位移合并进
@keyframes的from/to里（例如translateY(-100%) translateX(20px)） - 改用包装容器：把动画加在父容器上，内容元素只负责自身样式
别试图靠多个 transform 声明叠加，浏览器不认。
animation-fill-mode: forwards 必须加，否则动画结束就闪回
默认情况下，CSS 动画播放完会恢复到动画前的状态。比如元素原本 transform: none，即使动画里移到了 translateY(0)，一停就跳回顶部。
加上 animation-fill-mode: forwards 才能让最终帧样式保留：
.box {
animation: slideInFromTop 0.4s ease-out forwards;
}
漏掉 forwards 是最常被忽略的点，尤其在交互触发（如 hover、JS 添加 class）场景下，不加就会看到“滑下来→立刻弹回”的诡异现象。
性能敏感场景优先用 transform + opacity，别碰 top 或 margin
用 top: -100px → top: 0 或 margin-top: -100px → margin-top: 0 也能实现滑入，但会触发重排（layout），动画卡顿明显，尤其在中低端设备上。
transform 和 opacity 属于合成属性，走 GPU 加速，帧率更稳。
所以哪怕为了兼容老 IE（不支持 transform），也建议现代项目彻底放弃 top/margin 方案——现在连 iOS Safari 都早支持多年了。
另外，别在动画中修改 height 或 width，同样会强制重排。
