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