能否用纯CSS实现元素内容变化时触发动画？（宝石计数器场景）

如果你的计数器数值是纯CSS模拟递增的，确实可以实现每次变化触发pop动画，不用JS。但如果数值是JS动态修改的，纯CSS做不到——因为CSS无法监听DOM内容的变化。以下是纯CSS模拟计数器+触发动画的方案：

1. 定义动画与计数器 #

先写pop动画（这里用缩放效果示例，你可以按需求修改）：

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

然后用CSS计数器模拟每10秒加10的逻辑，同时让动画在计数更新时触发：

#gemCounter {
  counter-reset: gems 0; /* 初始化计数器为0 */
  position: relative;
  /* 驱动计数器递增的动画，每10秒执行一次 */
  animation: count-up 10s infinite linear;
}

#gemCounter::after {
  content: counter(gems); /* 显示计数器数值 */
  animation: pop 1s ease-in-out; /* 绑定pop动画 */
}

@keyframes count-up {
  to {
    counter-increment: gems 10; /* 每次动画结束时计数器加10 */
  }
}

2. 修改HTML结构 #

原来的<span id="gemCounter">0</span>改成空标签，因为数值由CSS伪元素渲染：

<span id="gemCounter"></span>

为什么能触发每次动画？ #

当count-up动画执行到to阶段时，counter-increment会更新计数器值，导致伪元素的content变化。浏览器重绘伪元素时，会重新执行绑定的pop动画，从而实现每次数值变化都播放一次动画。

局限性 #

• 这个方案只能模拟固定节奏的数值递增，无法和JS动态修改的DOM数值同步。如果你的计数器是JS控制的（比如用户操作、异步数据更新），那必须用JS监听数值变化，通过添加/移除类名触发动画（比如每次数值变时给元素加animate类，动画结束后移除）。
• 部分旧浏览器对CSS计数器的动画支持可能有问题，需要测试兼容性。

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