用transform: translateY()配合animation实现基础漂浮效果最稳妥，因transform不触发重排、性能更优；位移控制在-8px至6px，时长3s～5s，配ease-in-out缓动，并可叠加±0.5deg rotateZ增强自然感。
用 transform: translateY() 配合 animation 实现基础漂浮
直接改 top 或 margin-top 会触发重排，性能差；transform 只影响绘制层，更轻量。漂浮本质是周期性上下微位移，用 translateY() 最稳妥。
实操建议：
- 动画时长设为
3s～5s，太短像抖动，太长看不出“持续漂浮”感 - 位移幅度控制在
-8px到6px之间，超过 ±12px 就容易显得假或干扰阅读 - 用
ease-in-out缓动，比线性更接近真实物体受重力影响的节奏
div.card:hover {
animation: float 4s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
加 transform: rotateZ() 让漂浮带点自然倾斜
纯上下平移太机械。真实轻质物体会因气流或重心偏移微微晃动，加 ±0.5deg 的 Z 轴旋转能立刻提升微妙感，且人眼几乎察觉不到“在转”，只觉得“活了”。
注意点：
立即学习“前端免费学习笔记（深入）”；
- 旋转必须和位移同步变化，否则会错位；建议合并进同一
@keyframes - 别用
rotateX或rotateY——卡片是平面元素，绕 X/Y 轴转会穿帮（露出背面或变形） - 如果卡片有阴影（
box-shadow），旋转时阴影会自动跟随，无需额外调整
@keyframes float {
0%, 100% {
transform: translateY(0) rotateZ(0deg);
}
30% {
transform: translateY(-5px) rotateZ(-0.3deg);
}
70% {
transform: translateY(-2px) rotateZ(0.4deg);
}
50% {
transform: translateY(-6px) rotateZ(0deg);
}
}
hover 触发时避免动画突兀启动
默认 hover 立即播放动画，会卡顿或跳帧。关键在两处：一是给卡片本身加 animation-play-state: paused，hover 时才 running；二是用 will-change: transform 提前提示浏览器优化。
常见错误：
- 只写
animation: float 4s infinite在 hover 上，没关默认状态 → 鼠标未悬停时动画已在跑 - 忘记加
transform: translateZ(0)或will-change→ 首次 hover 有明显延迟或掉帧 - 用
transition模拟漂浮 → 它只能做“进入/离开”过渡，无法实现循环微动
div.card {
animation: float 4s ease-in-out infinite;
animation-play-state: paused;
will-change: transform;
}
div.card:hover {
animation-play-state: running;
}
移动端 Safari 和旧版 Chrome 的兼容细节
iOS 15.4 之前、Chrome 98 之前，animation-play-state 在 hover 上支持不稳定，尤其配合 transform 时可能失效。稳妥做法是用 @media (hover: hover) 做特性检测，非悬停设备（如手机）直接禁用动画。
另外：
- 别依赖
prefers-reduced-motion仅关动画——它只代表用户偏好，不等于设备性能差；但真要兼顾，可用@media (prefers-reduced-motion: reduce)降级为静态transform: translateY(-2px) - Android WebView 对
rotateZ渲染精度略低，±0.3deg 是安全阈值，别写 ±0.05deg 这种无效精度 - 如果卡片用了
backface-visibility: hidden（常见于翻转效果），记得漂浮动画里也带上它，否则某些安卓机上旋转会闪烁
