推荐用 transform: translateY() 实现悬停上浮，因其由 GPU 加速、避免重排、支持平滑过渡；而 margin-top 会触发重排导致卡顿。
为什么直接用 margin-top 悬停浮动不推荐
用 margin-top 做悬停上浮会触发浏览器重排（reflow），动画卡顿明显，尤其在低端设备或卡片较多时。而 transform: translateY() 只影响合成层，由 GPU 加速，性能更好，且天然支持 transition 平滑过渡。
用 transition + transform: translateY() 实现轻量浮动
这是最常用、兼容性好、无需 keyframes 的方案。适用于单次上浮/下浮，响应快，代码简洁。
- 必须给卡片设置
transition: transform 0.3s ease-out（时间与缓动可调） - 悬停时只改
transform: translateY(-8px)，负值向上，正值向下 - 确保卡片有明确的
display（如inline-block或block），避免因transform导致布局塌陷 - 如果卡片内含图片或字体图标，建议加
will-change: transform（仅在必要时，避免滥用）
.card {
display: inline-block;
transition: transform 0.3s ease-out;
}
.card:hover {
transform: translateY(-6px);
}
用 @keyframes 做循环浮动动画（如呼吸式上下漂浮）
适合首页 Banner 卡片、推荐位等需要持续吸引注意力的场景。注意：它和 :hover 是两套逻辑，不能混用——@keyframes 是自动播放，:hover 是交互触发。
- 定义 keyframes 时，起止帧都设为
transform: translateY(0)，中间加偏移形成“浮起-回落”节奏 - 用
animation控制循环、时长、延迟和填充模式（forwards不适用，因为要循环） - 慎用
infinite：页面卡片多时，大量并发动画会增加渲染压力 - 移动端建议加
prefers-reduced-motion: reduce媒体查询降级
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.card-float {
animation: float 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.card-float {
animation: none;
}
}
常见踩坑点：浮动失效或抖动
多数问题出在层级、定位或继承样式干扰上，不是动画本身写错了。
立即学习“前端免费学习笔记（深入）”；
-
transform会让元素生成新的层叠上下文（stacking context），若卡片内有position: relative+z-index的子元素，可能被盖住——检查父容器是否意外加了overflow: hidden - 使用
flex或grid布局时，卡片若设了align-items: center，transform上浮后可能视觉偏移，建议统一用align-items: flex-start - 动画中不要同时写
top/margin-top和transform，CSS 会以transform为准，但冗余声明易引发调试困惑 - Safari 旧版本对
transform: translateY()的 subpixel 渲染有轻微抖动，可加backface-visibility: hidden缓解
