react-spring链式关键帧：实现抖动CTA按钮间隔循环、关键帧间无延迟

react-spring 处理to数组形式的多关键帧动画时，会把全局配置里的delay参数逐段套用到每一段关键帧过渡的起点，而非绑定在整轮循环动画的开头。这就导致1000ms延迟被拆到形变、回弹两个过渡段的起始位置，出现关键帧之间卡延迟的错位效果。

不需要拆分动画、引入额外串联钩子，只需要调整三处配置就能实现目标效果：

• 删掉顶层配置里的全局delay: 1000
• 给to数组内的每个关键帧显式设置delay: 0，强制两段过渡零间隙衔接
• 把1000ms的延迟逻辑挪到loop参数的回调里，让延迟只作用在两轮动画的循环间隔上

调整后的完整配置：

useSpring({
  // loop 为函数时，每轮所有关键帧执行完成后触发，返回值决定下一轮的执行规则
  loop: (doneState) => {
    // 首轮直接启动，后续每轮等待1000ms再开始
    return doneState.loopCount === 0 ? true : { delay: 1000 }
  },
  config: { tension: 200, friction: 5 },
  from: { scaleX: 1, scaleY: 1, y: 0 },
  to: [
    // 逐关键帧设0延迟，避免全局参数渗透造成的过渡间隙
    { scaleX: 1.1, scaleY: 0.9, y: 3, delay: 0 },
    // 给回弹段单独配高张力参数，实现接近瞬切的回退效果
    { scaleX: 1, scaleY: 1, y: 0, delay: 0, config: { tension: 1000, friction: 30 } }
  ]
})

• 两段关键帧之间无任何延迟，形变完成后立刻以高张力弹簧参数切回初始状态，匹配快速抖动的视觉感受
• 1000ms的等待时间完全落在两轮完整抖动的间隔上，不会打断关键帧的连续过渡
• 所有改动都在原有useSpring实例上完成，不需要额外引入其他钩子

内容的提问来源于stack exchange，提问作者Sapinder Singh