animation-direction: alternate 必须与 animation-iteration-count: infinite 和 @keyframes 中 0% 与 100% 的 translateY 值一致（如均为 0）配合，才能实现自然上下浮动；位移推荐桌面端 ±6px–±12px、移动端 ≤±6px，且须用 transform 而非 top/bottom 以避免重排。
animation-direction: alternate 是让图标产生自然上下浮动感最直接有效的手段，但它本身不等于“浮动”——只是控制方向翻转的开关。真正起作用的是它和 animation-iteration-count: infinite、transform: translateY() 的组合。
为什么只用 alternate 不行？
单独设 animation-direction: alternate 而不配 animation-iteration-count: infinite，动画播完一次就停了，根本看不到“返”。更常见的情况是：写了 infinite 却忘了定义关键帧的 0% 和 100% 都回到原点，结果动画“冲出去”不再返回。
必须同时满足三个条件：
-
@keyframes中 0% 和 100% 的transform: translateY()值一致（通常是0） animation-direction: alternateanimation-iteration-count: infinite
translateY 位移量怎么选才不突兀？
浮动感来自小幅度、有呼吸节奏的位移。位移过大（比如 ±50px）像弹跳，过小（±1px）肉眼难察觉。实测推荐区间：
- 桌面端：±6px 到 ±12px（周期 2–2.5s，
ease-in-out） - 移动端（尤其 iOS Safari）：≤ ±6px，周期 ≥2.5s，避免掉帧
- 若用
top/bottom替代transform，会触发重排，动画卡顿明显——务必用transform
容易被忽略的性能细节
频繁的 transform 动画在低端设备或长页面中可能累积渲染压力。两个轻量级优化建议：
- 加
will-change: transform（仅对需长期浮动的元素），但别滥用，否则可能适得其反 - 避免同时动画多个属性（如
translateY + opacity + scale），除非明确需要协同呼吸感；单属性浮动更稳 -
animation-play-state: running在交互中暂停/恢复时才需要显式写，日常无需声明
浮动效果看似简单，但 0% 和 100% 关键帧是否闭合、infinite 是否漏写、位移单位是否用 px（而非 % 或 em）——这些地方一错，动画就“飘歪了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
