弹跳文字（逐字缩放回弹循环 CSS 源码）

效果演示（真实可交互）

下方「弹跳文字 POP!」的每个字会从 0 尺寸「嘣」地弹出，先冲过 1.18 倍再回落，配合逐字 0.05 秒错峰，像多米诺骨牌一样依次落地。下拉框可以切换「入场弹一次」与「无限弹跳」两种模式；点击「重新弹跳」按钮，单次模式下会从头再弹一遍，循环模式下会重置节奏重新起跳。

完整代码

HTML 结构：一句标题交给 JS 拆字：

<h2 class="pt-line" id="ptLine">弹跳文字 POP!</h2>

核心 CSS：字默认隐形（opacity 0 / scale 0），容器加 .run 后逐字播放回弹关键帧，加 .loop 则无限循环：

.pt-line span { display: inline-block; opacity: 0; transform: scale(0); }
.pt-line.run span {
  animation: ptPop .6s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: var(--d, 0s);
}
.pt-line.loop span {
  opacity: 1;
  animation: ptPop .6s cubic-bezier(.34, 1.56, .64, 1) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes ptPop {
  0%   { opacity: 0; transform: scale(0); }
  70%  { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

原生 JS：拆字 + 模式切换 + 重播（先移除类、强制回流、再添加，动画才会重新开始）：

function replayPop() {
  line.classList.remove('run', 'loop');
  void line.offsetWidth;
  line.classList.add(mode === 'loop' ? 'loop' : 'run');
}

参数说明

兼容性与性能

• 纯 transform + opacity 动画，全部走合成层，即使几十个字循环弹跳也不掉帧
• 关键帧的 70% 过冲是「回弹感」的来源，删掉该帧即变成普通缩放渐显
• 无限循环模式建议用于 6 字以内的短标题，长句循环会显得杂乱
• 已考虑重播场景：移除类 + 强制回流可稳定重启动画，不依赖 animationend 时序

常见问题

Q: 弹完一次后文字消失了？ 检查容器是否保留了 .run 类：单次模式依赖 animation-fill-mode: both 保持结束态，移除类会让字回到隐形初始态。

Q: 想让每个字弹出力度不同？ 给不同字写入不同的 --d 与缩放比例即可；例如偶数位用 scale(1.3)，大小交错更有节奏。

Q: 循环模式很耗性能吗？ 缩放与透明度都是合成属性，GPU 合成开销极小；真正的性能杀手是触发布局，本组件没有布局属性参与动画。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名。