translateY 动画比 top/margin 更推荐，因其属合成属性、触发布局后重绘或图层合成，GPU 加速更稳；而 top/margin 触发重排，性能差易卡顿。
translateY 动画为什么比 top/margin 更推荐
用 top 或 margin-top 做上下滑动会触发浏览器重排（reflow），性能差，尤其在中低端设备上容易卡顿；translateY 属于合成属性（composited property），只触发布局后的重绘或图层合成，GPU 加速更稳。
关键前提是：元素需开启硬件加速，通常加 transform: translateZ(0) 或 will-change: transform（后者慎用，仅对频繁动画的元素）。
@keyframes 中 translateY 的取值逻辑
滑动起点和终点用百分比或具体像素值均可，但必须保持单位一致（不能混用 % 和 px）。常见写法是用 0 表示原始位置，-100% 表示完全上滑出视口（相对自身高度），100% 表示完全下滑出视口。
示例（上滑隐藏）：
@keyframes slideUp {
from { transform: translateY(0); }
to { transform: translateY(-100%); }
}
注意：100% 是相对于元素自身的高度，不是父容器；若想滑出父容器可视区，且父容器高度固定，有时需手动计算像素值，比如 translateY(-200px)。
如何控制滑动方向、时长与循环行为
方向由 translateY 正负号决定：负值向上，正值向下；时长和缓动通过 animation 简写属性控制；循环/暂停/反向等靠独立属性微调。
-
animation: slideUp 0.3s ease-in-out—— 播放一次，0.3 秒，缓入缓出 -
animation: slideUp 0.3s ease-in-out infinite—— 无限循环 -
animation: slideUp 0.3s ease-in-out infinite reverse—— 循环且每次反向（上→下→上） -
animation-play-state: paused—— 运行时暂停，适合 hover 控制
如果需要“先下滑入场，再上滑退出”，建议拆成两个独立动画或用 JavaScript 切换 class，避免单个 @keyframes 内强行塞多段逻辑导致难以维护。
实际使用时容易忽略的兼容性与细节
IE10+ 支持 transform 和 @keyframes，但 IE10–11 不支持 will-change；Safari 旧版本对 transform 动画有渲染毛刺，加 backface-visibility: hidden 可缓解。
常见翻车点：
- 忘记给元素设
display: block（inline 元素对translateY响应异常） - 父容器设了
overflow: hidden，但没预留足够空间，导致滑动被裁剪 - 动画结束后元素“弹回原位”——因为没加
animation-fill-mode: forwards - 多个
transform同时存在（如 rotate + translateY），顺序写错导致效果偏移（CSS transform 是从右往左执行的）
真正难的不是写出来，而是让滑动停得准、起得顺、切得不闪，这些都藏在 animation-fill-mode、transform-origin 和父级布局约束里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
