上下浮动动画需用@keyframes配合transform: translateY()实现，位移量宜小（±8px），起止状态一致，周期内往返偏移；须避免重排、确保DOM挂载后触发，启用硬件加速并控制视口内播放。
用 @keyframes 定义上下浮动的位移范围
浮动动画本质是周期性地在垂直方向做小幅度位移，不能靠 top/bottom 动画（会触发重排），必须用 transform: translateY()。关键点在于：位移量要小（通常 ±10px 足够），且起止状态要一致，否则动画会“跳”。
常见错误是写成 from { transform: translateY(0); } to { transform: translateY(20px); } —— 这只是单向移动，不是浮动。正确做法是让元素在中间位置反复偏移：
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
100% {
transform: translateY(0);
}
}给卡片加 animation 并控制触发时机
动画默认加载即播（animation-play-state: running），但要注意：如果卡片初始被设为 display: none 或在视口外未渲染，动画可能不触发或错帧。稳妥做法是确保卡片已挂载 DOM 且可见后再启用动画。
推荐直接加在卡片类上，并设置合理时长与循环：
立即学习“前端免费学习笔记（深入）”；
-
animation: float 3s ease-in-out infinite;—— 3 秒一个周期，缓入缓出更自然 - 避免用
linear，否则浮动显得机械 - 加
animation-delay: 0.3s;可错开多个卡片的启动时间，避免同步抖动
防止布局抖动和性能掉帧
浮动动画若没做优化，容易导致页面其他元素重绘、滚动卡顿。核心原则是只动 transform 和 opacity 这类合成属性。
务必检查并规避以下问题：
- 卡片父容器有
overflow: hidden但浮动超出——会导致裁切或触发额外层叠上下文 - 卡片本身有
box-shadow且未开启硬件加速——加will-change: transform;或transform: translateZ(0); - 动画同时作用于几十个卡片却没节流——建议用 IntersectionObserver 控制仅视口内卡片播放动画
兼容性与 fallback 处理
所有现代浏览器都支持 @keyframes + transform，但老版 Safari（will-change 解析不稳定，IE 完全不支持。如需兼容 IE，只能放弃动画或改用 JS 模拟（不推荐）。
更实际的做法是渐进增强：
.card {
animation: float 3s ease-in-out infinite;
}
<p>@supports (animation: none) {
.card {
animation-duration: 2.5s;
}
}</p><p>@supports not (animation: none) {
.card {
/<em> 无动画的静态样式 </em>/
}
}真正容易被忽略的是：动画时间别设太短（4s），人眼对 2.5–3.5s 区间的浮动最敏感也最舒服；另外，如果卡片带点击交互，浮动期间不要遮挡热区——位移量超过 8px 就得重新测点击坐标偏移。
