animation-direction: alternate 表示动画奇数次正向、偶数次反向交替播放，需配合 animation-iteration-count: infinite 才生效；若仅播一次则无往返效果。
animation-direction: alternate 是什么行为
animation-direction: alternate 让动画在奇数次循环（第1、3、5次…）正向播放，偶数次（第2、4、6次…）反向播放。它不会让小球“跳起来再掉下去”就完事，而是让整个关键帧序列倒着走一遍——比如 @keyframes bounce 里从 0% 到 100% 是“下落→触底→回弹”，那么反向时就是“回弹→触底→下落”，视觉上会像小球在原地上下颠簸，但落地点不变、节奏连贯。
- 必须配合
animation-iteration-count: infinite才能看出交替效果，否则只播一次就停了 - 如果关键帧本身没设计好“可逆性”，比如 0% 和 100% 的
transform不对称，反向播放时会出现突兀位移 - 别和
animation-fill-mode搞混：alternate控制的是播放方向，forwards控制的是结束后的样式保持
写一个能跳动的球，关键帧怎么设才不抽搐
小球跳动要自然，得模拟重力加速度和弹性衰减。最简可行的关键帧不是线性上下平移，而是用 transform: translateY() 配合 cubic-bezier(0.34, 1.56, 0.64, 1) 这类非线性缓动。下面这段可以直接用：
@keyframes bounce {
0% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(30px) scale(0.95);
}
100% {
transform: translateY(0) scale(1.05);
}
}
- 50% 是最低点，位移值（如
30px）决定跳多高，太大会飘，太小看不出动效 - scale 变化增强物理感：压扁（
scale(0.95)）在最低点，回弹时略膨胀（scale(1.05)），两端恢复原状 - 0% 和 100% 的
transform必须完全一致，否则alternate反向时会跳帧
让小球真正“跳起来”的 CSS 组合写法
光有 @keyframes 不行，得用对 animation 属性组合。常见错误是漏掉 animation-timing-function 或写错 animation-direction 位置：
.loader-ball {
width: 12px;
height: 12px;
background: #3498db;
border-radius: 50%;
animation: bounce 0.6s ease-in-out infinite alternate;
}
-
ease-in-out是必须的，它让小球起跳柔和、落地也柔和；用linear会像机械振动 -
infinite alternate要连写，不能拆成两行或中间加换行，CSS 解析器会忽略非法值 - 如果小球静止不动，先检查浏览器是否支持
transform（IE9+、现代所有浏览器都 OK），再确认元素有没有被display: none或父容器overflow: hidden截断
多个小球串联跳动时 alternate 容易踩的坑
做三个小球依次跳动（比如 loading 状态常见的“省略号”式动画），有人直接给每个球加相同 animation-delay 再依赖 alternate，结果发现第二颗球反向时和其他球不同步。问题出在：所有球的动画起点相同，alternate 只控制单个动画的方向，不协调多个实例的时间轴。
- 正确做法是：固定一个基础时长（如
0.6s），然后用animation-delay错开相位，例如-0.2s、0s、0.2s，让它们看起来像接力 - 如果用了
animation-play-state: paused动态控制，alternate的方向状态不会重置，暂停再播放可能从反向开始，建议改用 JS 控制classList开关动画类 - 移动端 Safari 对
transform+alternate的复合动画偶有渲染延迟，可加will-change: transform提前提示优化
真正难的不是写出跳动，而是让跳动在各种缩放、暗色模式、低配设备下都不掉帧、不偏移、不卡顿。这些细节藏在 timing function 的选择、scale 的微调、以及是否主动触发 GPU 加速里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
