transition 不支持循环，它仅在属性值变化时触发一次单向过渡；实现循环动效必须使用 @keyframes + animation，并通过 animation-iteration-count: infinite、对称关键帧和 ease-in-out 等参数模拟过渡感。
transition 本身不支持循环
transition 是状态驱动的：只在属性值变化时触发一次，从旧值到新值平滑过渡。它没有「重复」「循环」「回到起点再重来」的能力。想实现视觉上的循环动效（比如颜色来回渐变、图标无限旋转缩放），必须换用 @keyframes + animation。
用 animation 实现等效的“循环过渡”效果
关键不是“让 transition 循环”，而是用 animation 模拟出过渡感，并控制循环行为：
-
animation-timing-function设为ease-in-out或cubic-bezier()，能复刻transition的缓入缓出感 -
animation-iteration-count: infinite实现无限循环 - 关键帧定义要「对称」才能视觉连贯，例如：0% → 50% → 100%，且 100% 回到起始状态或镜像状态
示例：模拟一个按钮背景色来回淡入淡出（类似 hover 过渡但自动循环）
@keyframes pulse-bg {
0% { background-color: #4a90e2; }
50% { background-color: #7aafff; }
100% { background-color: #4a90e2; }
}
.btn-pulse {
animation: pulse-bg 2s ease-in-out infinite;
}
transition 和 animation 混用时的常见冲突
如果元素同时写了 transition 和 animation，且动画修改了同一属性（如 transform），animation 会覆盖 transition 的行为——但容易出现意料外的卡顿或跳变，尤其在动画中途触发 hover。
立即学习“前端免费学习笔记（深入）”；
- 避免对同一属性既设
transition又设animation - 若需交互中断动画（如 hover 暂停），用
animation-play-state: paused，而不是依赖transition接管 - 动画中修改
transform或opacity性能更好；避免动画width/height/left/top等触发布局的属性
需要“循环过渡”的真实场景怎么选方案
不是所有循环需求都该硬套 animation。先判断是否真需要自动循环：
- 加载指示器（如旋转圆圈）→ 用
animation，infinite+linear最自然 - 焦点提示（如输入框边框呼吸闪烁）→
animation更可控，可配合:focus-within开关 - 用户 hover 才动、离开就回弹 → 用
transition足够，无需循环 - 想“hover 启动后自动循环播放”→ 必须用
animation，并在:hover里设置animation-play-state: running
循环的本质是时间轴控制，而 transition 没有时间轴；别试图给它加 loop 属性，它根本不存在。
