要让CSS loading动画无限循环，需在animation属性中同时使用linear和infinite关键字，如animation: spin 1s linear infinite；其中linear确保匀速，infinite实现永不停止的循环播放。
要让 CSS loading 动画无限循环，只需在 animation 属性中同时指定 linear（匀速）和 infinite（无限）两个关键字即可。
关键写法：animation: 名称 时长 linear infinite
这是实现匀速、不停止加载动画的核心语法。其中：
-
名称：对应
@keyframes定义的动画名，比如spin或fade -
时长：如
1s、0.8s，控制一圈播放多快 - linear：让动画从头到尾速度一致，无加速或减速
- infinite：让动画循环播放，永不结束
一个典型旋转 loading 示例
HTML 中放一个元素：
CSS 写法如下：
立即学习“前端免费学习笔记（深入）”；
@keyframes spin {to { transform: rotate(360deg); }
}
.loader {
width: 40px;
height: 40px;
border: 4px solid #eee;
border-top-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
常见组合与注意事项
- 可与其他 timing-function 混用，但
linear是实现“匀速转圈”的首选 - 若没加
infinite，动画只播一次就停；漏掉linear可能默认使用ease，导致开头结尾变慢 - 支持链式写法，例如：
animation: spin 0.6s linear infinite, pulse 2s ease-in-out infinite（多个动画叠加） - 用
animation-play-state: paused可临时暂停，适合交互控制
不加 infinite 就不是 loading 动画
loading 的本质是“持续提示用户正在处理”，一旦动画停止，视觉上就失去了等待信号。所以 infinite 不是可选项，而是必要项。配合 linear 才能让节奏稳定、不突兀，观感更专业。
