css过渡如何设置循环效果_通过使用CSS动画替代transition实现循环过渡

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 属性，它根本不存在。