translatey 是跳动动画首选，因不触发重排、gpu加速更稳；需设定位上下文，推荐加 translatez(0) 开启硬件加速；三连点同步靠负 delay 对齐，须配 animation-fill-mode: backwards。
translateY 做跳动加载动画，比用 top 或 margin-top 更稳——它不触发重排，GPU 加速更可靠，尤其在中低端设备上不容易卡顿。
为什么 translateY 是跳动动画的首选
浏览器对 transform 类属性（包括 translateY）做了深度优化：只要元素开启了合成层，位移就走 GPU 合成管线，帧率更稳。而 top、margin-top 会强制触发 layout + paint，动画一多就掉帧。
但注意前提：translateY 要生效，元素得有定位上下文（比如 position: relative 或 absolute），否则某些布局下可能“动了但看不见”。
- 推荐加
transform: translateZ(0)或will-change: transform主动开启硬件加速（后者慎用，仅对高频动画元素） - 避免在 flex / grid 容器里直接对子项用
translateY且未设position，容易因布局计算导致偏移异常 -
translateY的百分比值是相对于元素自身高度，不是父容器——translateY(-50%)是上移自己一半高，不是父容器一半
三连点跳动动画：负 delay 对齐的关键写法
多个点同步跳动，靠的是 animation-delay 负值切入同一动画帧位置，不是等时间差启动。正向延迟（如 0.2s, 0.4s）会导致首帧错位，看起来“不同步”。
- 动画周期必须一致，比如都用
animation-duration: 1s - 三个点等分周期，延迟应为
-0s、-0.333s、-0.666s，不能写-33.3%（CSS 不支持 % 单位的 delay） - 必须加
animation-fill-mode: backwards，否则 DOM 渲染瞬间可能卡在非 0% 帧，第一跳突兀
@keyframes dot-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
.loading-dots span {
display: inline-block;
width: 8px;
height: 8px;
background: #333;
border-radius: 50%;
animation: dot-bounce 1s infinite ease-in-out;
animation-fill-mode: backwards;
}
.loading-dots span:nth-child(1) { animation-delay: -0s; }
.loading-dots span:nth-child(2) { animation-delay: -0.333s; }
.loading-dots span:nth-child(3) { animation-delay: -0.666s; }
单点弹跳 vs 多点错位：参数差异直接影响节奏感
单个点弹跳，重点在缓动函数和位移幅度；多个点错位，核心是 delay 与 duration 的比例关系。两者混用容易节奏混乱。
-
ease-in-out弹跳自然，适合模拟弹性；cubic-bezier(0.2, 0.6, 0.4, 1)更轻快，适合小尺寸加载点 - 位移量别硬写像素——
translateY(-12px)在高清屏可能显得太小，建议用rem或配合scale()动态调整 - 如果点之间间距不均，别调
margin，改用inline-block+vertical-align: middle控制基线，更可控
容易被忽略的 DOM 渲染时机问题
即使 CSS 写对了，仍可能看到第一帧“卡住”或“闪一下”，根本原因常是样式注入时机早于元素挂载，或未处理初始状态。
- 避免把动画类直接写在 HTML 元素上（如
class="dot animate"），应由 JS 动态添加，确保 DOM ready 后再触发动画 - 若用伪元素做点（如
::before），要确认父元素已设position: relative，否则translateY可能失效 - 移动端 Safari 对
transform+steps()组合偶有半像素渲染偏差，优先用background-position替代位移做逐帧
translateY，而是让每个点在正确的时间、以正确的幅度、从正确的起始位置开始跳——少算 0.001s 的 delay，视觉节奏就松了；没设 backwards，第一跳就断在半空。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
