CSS数字计数动画仅在Firefox和Chrome生效，如何适配苹果Safari浏览器？

你好～这个问题在Safari里很常见，主要是它对CSS计数器动画的支持逻辑和Chrome、Firefox不一样，而且你的原代码其实还存在一点小逻辑问题（后面会说到）。下面给你两个解决方案，都能让动画在苹果设备的Safari里正常跑起来：

方案一：改用CSS变量实现（推荐，兼容性更好） #

这种方式避开了Safari对计数器动画的支持限制，直接用CSS变量控制显示的数值，所有主流浏览器（包括Safari）都能完美支持：

div::after { 
  font: 800 40px system-ui; 
  /* 使用CSS变量作为显示内容 */
  content: var(--count); 
  /* 添加-webkit-前缀兼容Safari */
  animation: counter 5s linear forwards;
  -webkit-animation: counter 5s linear forwards;
  /* 初始数值设为0 */
  --count: 0; 
} 

/* 带webkit前缀的关键帧，适配Safari */
@-webkit-keyframes counter { 
  0% { --count: 0; } 
  10% { --count: 8; } 
  20% { --count: 16; } 
  30% { --count: 32; } 
  40% { --count: 64; } 
  50% { --count: 128; } 
  60% { --count: 256; } 
  70% { --count: 512; } 
  80% { --count: 1024; } 
  90% { --count: 2048; } 
  100% { --count: 4000; } 
} 

@keyframes counter { 
  0% { --count: 0; } 
  10% { --count: 8; } 
  20% { --count: 16; } 
  30% { --count: 32; } 
  40% { --count: 64; } 
  50% { --count: 128; } 
  60% { --count: 256; } 
  70% { --count: 512; } 
  80% { --count: 1024; } 
  90% { --count: 2048; } 
  100% { --count: 4000; } 
} 

<div></div>

方案二：修复计数器写法并添加前缀（针对原逻辑调整） #

如果你坚持用CSS计数器实现，需要注意两个关键点：

• 给动画和关键帧添加-webkit-前缀，适配Safari的前缀要求；
• 修正原代码的逻辑错误：原代码中counter-increment: count X是给计数器累加X，而不是直接将计数器设置为X，这会导致最终数值远大于4000（比如到100%时会是0+8+16+32+...+4000），和你预期的效果不符。

修正后的代码如下：

div::after { 
  font: 800 40px system-ui; 
  content: counter(count); 
  animation: counter 5s linear forwards;
  -webkit-animation: counter 5s linear forwards;
  /* 重置计数器初始值为0 */
  counter-reset: count 0; 
} 

@-webkit-keyframes counter { 
  /* 每帧累加对应步长，最终让计数器达到4000 */
  0% { counter-increment: count 0; }
  10% { counter-increment: count 8; }
  20% { counter-increment: count 8; } /* 从8到16需要再加8 */
  30% { counter-increment: count 16; } /* 从16到32需要加16 */
  40% { counter-increment: count 32; }
  50% { counter-increment: count 64; }
  60% { counter-increment: count 128; }
  70% { counter-increment: count 256; }
  80% { counter-increment: count 512; }
  90% { counter-increment: count 1024; }
  100% { counter-increment: count 1952; } /* 2048 + 1952 = 4000 */
} 

@keyframes counter { 
  0% { counter-increment: count 0; }
  10% { counter-increment: count 8; }
  20% { counter-increment: count 8; }
  30% { counter-increment: count 16; }
  40% { counter-increment: count 32; }
  50% { counter-increment: count 64; }
  60% { counter-increment: count 128; }
  70% { counter-increment: count 256; }
  80% { counter-increment: count 512; }
  90% { counter-increment: count 1024; }
  100% { counter-increment: count 1952; }
} 

为什么原代码在Safari失效？ #

主要有两个原因：

• Safari的旧版本（甚至部分新版本）需要-webkit-前缀才能识别CSS动画和关键帧；
• Safari对@keyframes内的counter-increment支持不如Chrome/Firefox完善，无法正确解析原代码中直接在关键帧设置不同增量的写法。

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