transition-delay需≥transition-duration才能实现连贯往返效果，推荐设为duration×2；必须写在默认状态而非:hover中；在@keyframes中无效，应改用animation-delay。
transition-delay 怎么配合 transition-duration 实现“往返”效果
单纯靠 transition 无法自动循环或反向，它只响应属性变化。所谓“往返”，本质是手动触发两次状态切换：一次正向、一次延迟后反向。关键在用 transition-delay 控制第二次变化的时机，让视觉上连贯起来。
常见错误是把 transition-delay 设成负值想“提前启动”，结果动画直接跳过前半段；或者 delay 设得太短，两次过渡重叠导致卡顿或错位。
-
transition-duration决定单程耗时（比如0.3s） -
transition-delay要 ≥transition-duration，否则第二次变化还没等第一次结束就来了 - 推荐 delay = duration × 2，留出完整单程时间 + 回程准备间隙，例如
transition: left 0.3s ease 0.6s
用 :hover + class 切换实现可交互的往返动效
纯 CSS 往返必须依赖状态切换，最常用的是 :hover 触发初始变化，再用 JS 或伪类控制回程。但仅靠 :hover 只能做“进入→离开”两段，离开时浏览器会自动过渡回去——这正是免费的“往返”来源。
容易踩的坑：没写回退的终态样式，导致鼠标移开后元素卡在中间位置；或者 transition 没写在默认状态（而非 :hover），导致移开时不触发过渡。
立即学习“前端免费学习笔记（深入）”；
- 必须把
transition声明写在默认状态（如.box），不是.box:hover -
:hover只改属性值（如left: 100px），移开时浏览器自动按原 transition 回退 - 若需多次点击触发，得用 JS 切换 class，并确保 class 移除后有明确的终态样式
transition-delay 在 keyframes 不起作用？别混用
transition-delay 和 @keyframes 属于两套机制：前者响应属性变更，后者定义帧序列。把 transition-delay 写在 @keyframes 里完全无效，CSS 解析器会忽略。
想用 delay 控制动画起始时间，只能作用于 animation-delay；想控制过渡节奏，只能靠 transition-timing-function（如 cubic-bezier(0.4, 0, 0.2, 1)）。
- 错误写法：
@keyframes slide { 0% { left: 0; transition-delay: 0.5s; } }→ 无效 - 正确做法：用
animation: slide 0.6s ease 0.5s infinite，其中0.5s是animation-delay - 如果硬要 transition 模拟循环，得靠 JS 定时 toggle class，每次 delay 都得重新计算
用 JS 主动触发 transition 循环时的 timing 陷阱
用 JS 改变 class 或内联样式来驱动 transition，看似自由，实则极易因浏览器渲染时机出问题：比如连续两次 element.style.left = '100px'，第二次会被合并，过渡不触发。
核心原理：浏览器需要“样式计算→布局→绘制”的完整周期，中间至少一次 reflow 才能识别状态变化。强行压缩会导致过渡丢失。
- 必须在第一次修改后加
void element.offsetWidth（或getComputedStyle）强制同步 layout - delay 用
setTimeout而非requestAnimationFrame，因为后者太快，可能赶不上样式更新 - 示例节拍：
el.classList.add('moved'); void el.offsetWidth; setTimeout(() => el.classList.remove('moved'), 300);
真正难的不是写对那几行 CSS，而是理解浏览器何时开始/结束一次 transition —— 它不看你写了几个 transition，而看你实际改变了什么、改变之间隔了多久、有没有被优化掉。动手前先打开 DevTools 的 Rendering 面板看帧率，比猜更可靠。
