transition不能真正循环，因其仅在属性值变化瞬间执行一次，无iteration-count等控制项；实现循环过渡必须用@keyframes+animation，如animation: slide 2s ease-in-out infinite。
HTML 本身不支持“循环过渡”，transition 天然只在状态切换时执行一次，无法自动重复。真要实现视觉上的「循环过渡效果」，必须绕开 transition 的单次限制，改用 @keyframes + animation，或用 JavaScript 驱动类名反复切换 —— 后者容易卡顿、难控制节奏，不推荐。
为什么 transition 不能真正循环
transition 是响应式机制：它只在 CSS 属性值**发生变化的瞬间**启动一次动画，比如从 opacity: 0 → opacity: 1。即使你用 JS 每隔 1 秒来回切 opacity，那也只是多个独立的过渡事件，不是连续循环动画；且频繁修改样式易触发重排，性能差。
- 浏览器不会把
transition当作可循环的播放器，没有iteration-count或direction: alternate这类控制项 -
transitionend事件只能监听单次结束，手动重启会引入延迟和时序漂移 - 对
width、height等影响布局的属性做高频过渡，极易造成 layout thrashing
用 @keyframes + animation 实现真循环
这是最可靠、性能最好、语义最清晰的方式。你定义关键帧序列，再用 animation-iteration-count: infinite 让它无限播放。
- 必须用
transform或opacity动画（避免重排），例如：transform: translateX(0)→translateX(100px)→translateX(0) - 时间点需闭合：若想“平滑来回”，
to帧要回到起点，或用animation-direction: alternate - 示例：左右平移循环
div {
animation: slide 2s ease-in-out infinite;
}
@keyframes slide {
0% { transform: translateX(0); }
50% { transform: translateX(20px); }
100% { transform: translateX(0); }
}
注意：不要写 animation: slide 2s infinite; 而漏掉 timing-function，否则默认是 ease，可能不符合预期节奏。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
transition + JS 类名轮换的坑与勉强可行场景
仅当动画逻辑极简单、频率很低（如每 3 秒一次淡入淡出）、且兼容性要求覆盖 IE11 时才考虑。核心是避免直接操作样式，改用 class 切换触发 transition。
- 必须用
getComputedStyle或offsetHeight强制重排，才能让浏览器“看到”状态变化并重新触发 transition（否则连续 add/remove 同一类无效） - 别用
setTimeout控制节奏，优先用transitionend事件链式触发，但要注意多次绑定导致的内存泄漏 - 示例结构（仅示意逻辑）：
// 切换前先强制重排
el.classList.remove('active');
void el.offsetWidth; // 触发重排
el.classList.add('active');
这种写法脆弱、难调试，现代项目应直接放弃。
真正需要循环动效时，@keyframes 是唯一正解。别试图给 transition “打补丁”，它的设计目标从来就不是循环播放。
