用 translatey() 实现图标浮动更高效，因其触发 gpu 加速且不引发重排；top/margin 则触发完整渲染流程导致卡顿。推荐动画：@keyframes float {0%{transform:translatey(0)}50%{transform:translatey(-8px)}100%{transform:translatey(0)}}，配 3s infinite ease-in-out。
直接用 @keyframes 配合 transform: translateY() 就能实现轻量、高性能的图标浮动，不需要 JS，也不触发重排。
为什么用 translateY 而不是 top/margin？
浮动效果本质是视觉位移，translateY() 属于合成属性，浏览器会将其提升到独立图层并走 GPU 加速；而 top 或 margin-top 会触发 layout → paint → composite 全流程，动画一卡一卡的。
- 必须只动
transform和/或opacity才能进合成层 -
top在现代 CSS 动画中属于“性能雷区”，尤其在移动端 - 如果图标父容器用了
position: relative，再用top还可能意外影响其他元素定位
写一个自然浮动的 @keyframes 规则
别用匀速上下（linear），人眼会觉得机械。加点缓动+小幅度+低频率，才像“呼吸感”浮动：
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-8px); /* 上浮幅度建议 ≤10px */
}
100% {
transform: translateY(0);
}
}
- 周期设为
3s或更长，太快显得躁动，太慢看不出效果 - 用
cubic-bezier(0.3, 0.8, 0.5, 1)替代默认ease，让回落更柔和 - 避免从
-10px → +10px穿越中线，容易产生“抖动错觉”，单向微偏更稳
绑定动画到图标时的关键配置
光有 @keyframes 不够，还得靠 animation 属性正确调度：
.icon {
animation: float 3s ease-in-out infinite;
transform-origin: center; /* 保证浮动围绕中心，不歪斜 */
}
-
infinite必须加，否则只动一次就停 - 别漏写
ease-in-out—— 默认ease在起止处减速不够，浮动会“撞墙” - 如果图标是 inline 元素（比如
<i></i>或 SVG），先加display: inline-block或vertical-align: middle，防止基线跳动 - 想让多个图标浮动节奏错开？给不同图标加
animation-delay: -0.5s这类偏移值
兼容性与降级处理要点
所有现代浏览器（Chrome 43+、Firefox 16+、Safari 9+、Edge 12+）都支持 transform + animation，但两个细节常被忽略：
- iOS Safari 旧版（≤12.5）对
will-change: transform有内存泄漏风险，**不要加**；真要优化，用transform: translateZ(0)更稳妥 - 如果图标是 SVG 内联写的，确保
<svg></svg>没设固定height，否则translateY可能被截断 - 不需要为 IE 写前缀了——IE11 已终止支持，且其
@keyframes实现 buggy，强行兼容反而增加维护成本
浮动幅度和节奏比动画本身更重要：人眼对重复频率极其敏感，8px / 3s 是多数场景下的安全起点，调完务必在真机上 hover 几秒看是否晕眩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
