CSS动画无限循环需设animation-iteration-count: infinite，配合@keyframes实现旋转、浮动或复合动效，并注意性能优化与无障碍降级。
在 H5 页面中，用 animation-iteration-count: infinite 可以让 CSS 动画无限重复，实现旋转（如 loading 图标）或浮动（如悬浮气泡、广告提示）效果。关键在于配合合适的动画关键帧（@keyframes）和基础属性设置。
旋转动画：无限自转图标
适用于加载中图标、logo 旋转等场景。需定义一个从 0° 到 360° 的完整旋转，并设循环次数为 infinite：
.spin {
animation-name: rotate;
animation-duration: 1.2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
说明：
• linear 保证匀速旋转；若用 ease-in-out 会显得“呼吸感”更强
• 若元素是内联元素（如 <span>），建议加 display: inline-block 或 block，确保 transform 生效
• 如需顺时针/逆时针控制，可改写 to 为 rotate(-360deg)
上下浮动动画：模拟轻盈漂浮
适合气泡、提示 badge、装饰性小图标等。通过 transform: translateY() 在垂直方向轻微位移：
.float {
animation: float 2.5s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-12px); }
100% { transform: translateY(0px); }
}
说明：
• 使用 ease-in-out 让浮动有缓起缓停的自然感
• 浮动幅度建议控制在 ±5–15px，过大易显突兀
• 可叠加 animation-delay: -0.5s 让多个浮动元素错峰运动，更真实
组合技巧：旋转 + 浮动 + 缩放（增强动态感）
单一动画略单调，可叠加多个 transform 值，实现复合动效：
.combo {
animation: combo 3s ease-in-out infinite;
}
@keyframes combo {
0% { transform: rotate(0deg) translateY(0) scale(1); }
33% { transform: rotate(10deg) translateY(-8px) scale(1.05); }
66% { transform: rotate(-5deg) translateY(4px) scale(0.98); }
100% { transform: rotate(0deg) translateY(0) scale(1); }
}
说明：
• 所有变换写在同一行 transform 中，用空格分隔，浏览器会自动合并计算
• 各阶段数值宜小幅变化，避免跳变；可用百分比或 calc() 提高灵活性
• 若需兼容老版 Android（≤4.3），需补全 -webkit- 前缀
注意事项与优化建议
实际开发中容易忽略但影响体验的细节：
- 避免对
position: static元素直接使用transform触发硬件加速——建议加will-change: transform或transform: translateZ(0)提升渲染性能 - 移动端慎用高频率动画（如
animation-duration: 0.3s），可能引发卡顿；推荐 1–3 秒区间 - 用户偏好减少动画（
prefers-reduced-motion）开启时，应优雅降级：@media (prefers-reduced-motion: reduce) { .spin, .float { animation: none; } } - 若用 JS 控制启停（如加载完成停止旋转），推荐切换 class（如
.spin.is-active），而非直接操作style.animation
