CSS动画实现自动循环的核心是定义@keyframes关键帧并设置animation-iteration-count: infinite；配合direction、timing-function、play-state等属性可控制节奏；优先使用transform和opacity提升性能，注意硬件加速与动效偏好适配。
用 CSS animation 实现元素自动循环动起来，核心是定义关键帧（@keyframes）并搭配 animation-iteration-count: infinite 让动画无限重复。
1. 基础语法：写一个最简循环动画
先定义动画行为，再应用到元素上：
- 用
@keyframes命名动画并描述变化（比如从左到右平移） - 在元素上设置
animation简写属性，或拆开写animation-name、animation-duration、animation-iteration-count等 - 加上
infinite就能自动循环，不加默认只播一次
示例：
@keyframes slideRight {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
<p>.box {
animation: slideRight 2s ease-in-out infinite;
}2. 控制循环节奏：暂停、加速、反向播放
仅“动起来”不够，常需调节观感：
立即学习“前端免费学习笔记（深入）”；
-
animation-direction: alternate：奇数次正向、偶数次反向，实现“来回滑动”效果 -
animation-timing-function: linear / ease / cubic-bezier(...)：控制速度曲线，避免生硬匀速 -
animation-play-state: paused：配合 hover 或 JS 暂停/恢复动画 -
animation-delay: 0.5s：延迟开始，适合多个元素错位入场
3. 实用循环动画场景与写法
常见需求可直接套用结构：
-
呼吸缩放：
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } -
旋转加载图标：
@keyframes spin { to { transform: rotate(360deg); } }+animation: spin 1s linear infinite -
文字渐显轮播：用 opacity + animation-delay 错开多个
span的显示时机
4. 注意事项：让动画更自然可靠
避免踩坑，提升兼容性和体验：
- 给动画元素加
transform: translateZ(0)或will-change: transform，触发硬件加速，减少卡顿 - 慎用影响布局的属性（如 width、height、top/left）做动画，优先用
transform和opacity - 移动端注意添加
@supports (animation: name 1s) { ... }做基础检测（老 Android 4.x 需要 -webkit- 前缀） - 用户偏好减少动画时（
prefers-reduced-motion: reduce），建议用媒体查询关掉非必要动画
不复杂但容易忽略。写好 keyframes，配对 infinite 和合适 timing，元素就自己动起来了。
