上下漂浮动画需用@keyframes定义transform: translateY()周期性偏移，配合infinite循环、ease-in-out缓动及hover触发，位移控制在±8px内，容器需预留行高并设overflow:hidden防布局跳动。
用 @keyframes 定义上下漂浮动画
核心是让元素在 transform: translateY() 上做周期性偏移，配合 @keyframes 控制起止位置和缓动。不能只靠 transition，因为那是属性变化的过渡，而漂浮需要循环往复的运动。
常见错误是把动画写成单次位移（比如只从 0px 到 -10px 就停了），结果鼠标悬停后只动一下就静止——必须用 animation-iteration-count: infinite 让它持续循环。
- 动画名建议用语义化名称，如
float-up-down，避免用hover-animation这类模糊命名 - 位移幅度控制在
-8px到8px之间较自然；超过±12px容易显得突兀 - 推荐用
ease-in-out或cubic-bezier(0.34, 1.56, 0.64, 1)模拟轻盈感，别用默认的ease
@keyframes float-up-down {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
100% {
transform: translateY(0);
}
}
悬停时触发动画的关键写法
动画必须绑定在 :hover 伪类上，且要显式设置 animation 所有子属性。很多人漏掉 animation-fill-mode: forwards 或写错 animation-direction，导致动画卡在中间帧或反向播放。
特别注意：不要在非 hover 状态下也写 animation，否则默认就动，失去“悬停才启动”的语义。
立即学习“前端免费学习笔记（深入）”；
-
animation-duration建议设为2.5s～3.5s，太快像抖动，太慢失去漂浮感 - 必须加
animation-timing-function: ease-in-out，否则线性运动（linear）会显得机械 - 如果文字本身有
display: inline，需先设display: inline-block，否则transform可能不生效
a:hover {
animation: float-up-down 3s ease-in-out infinite;
}
避免文字抖动或布局跳动
漂浮动画本质是视觉位移，但如果父容器高度没预留空间，translateY(-6px) 可能让文字上移后遮挡上方元素，或下移时撑开行高——这不是动画问题，而是布局没隔离。
根本解法是让动画脱离文档流影响，同时保持可访问性（不能用 position: absolute 把文字提走）。
- 给文字容器加
overflow: hidden，防止上浮时内容溢出 - 确保行高（
line-height）足够，例如设为1.4以上，留出上下浮动余量 - 慎用
will-change: transform，仅当动画卡顿时添加，否则可能引发渲染层异常
兼容性与性能提醒
transform 和 @keyframes 在现代浏览器中无兼容问题，但 iOS Safari 13.3 之前对 transform: translateY() 在 inline 元素上的支持不稳定，所以务必测试真机。
性能上，只要不用 left/top 触发重排，纯 transform 是 GPU 加速的。但若页面有几十个同时漂浮的元素，仍可能触发合成层过多，导致内存升高。
容易被忽略的一点：动画时间函数里写的 cubic-bezier 如果控制点超出 [0,1] 范围（比如 y 值 > 1），部分旧版 Android WebView 会直接失效，回退到 linear——建议先用标准 ease-in-out，再按需微调。
