如何消除CSS无限文本缩放动画中50%至51%帧的跳跃问题？

原动画的跳跃问题源于50%到51%关键帧之间存在可感知的时间间隔，浏览器会对这两个状态进行插值计算，导致缩放过渡不够“立即”；同时原关键帧的结束状态（100%回到scale(1)）不符合你期望的“从0缩放至300循环”的逻辑。

方案一：拆分动画阶段（推荐） #

将动画拆分为首次触发的放大阶段和后续的无限循环阶段，用极小的时间差实现无跳跃状态切换：

div {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}

p:hover {
  padding: 40px;
  display: inline-flex;
  /* 先执行一次首次放大动画，延迟2秒后开始无限循环 */
  animation: first-scale 2s linear forwards, loop-scale 2s linear infinite 2s;
}

/* 首次动画：从初始大小放大到300倍并淡出 */
@keyframes first-scale {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(300);
    opacity: 0;
  }
}

/* 循环动画：从0倍放大到300倍，瞬间切回0倍循环 */
@keyframes loop-scale {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  99.9% {
    transform: scale(300);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 1;
  }
}

<div>
  <p>some text</p>
</div>

方案二：单个关键帧调整 #

如果你希望用单个keyframes实现，可以缩小跳转关键帧的时间差，同时修正循环状态衔接：

div {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}

p:hover {
  padding: 40px;
  display: inline-flex;
  animation: endless-scale 4s linear infinite;
}

@keyframes endless-scale {
  /* 初始状态：正常大小 */
  0% {
    transform: scale(1);
    opacity: 1;
  }
  /* 前半段：放大到300倍并淡出 */
  49.9% {
    transform: scale(300);
    opacity: 0;
  }
  /* 瞬间跳转：从300倍切到0倍并淡入 */
  50% {
    transform: scale(0);
    opacity: 1;
  }
  /* 后半段：从0倍放大到300倍 */
  100% {
    transform: scale(300);
    opacity: 1;
  }
}

这个方案通过49.9%和50%的极小时间差（仅0.004秒），让浏览器几乎不会进行插值计算，实现视觉上的瞬间跳转；100%的状态设为scale(300)，确保循环时的状态衔接符合需求。

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