带有步骤1的简短CSS动画不会在Chrome中结束

如何解决带有步骤1的简短CSS动画不会在Chrome中结束

我正在尝试使用css动画从0到100进行计数，但是当动画足够短时，我在Chrome中遇到了一些问题。更具体地说，当animation-duration为6毫秒时，一切正常，但当其为5毫秒时，它并未以应有的状态（opacity: 0;结束，因此数字仍然可见且重叠。>

如果我向steps(n)计时功能添加更多步骤，数字的不透明度将接近0。将其更改为另一个计时功能可解决此问题，但不会产生我想要的效果。

无论动画持续时间如何，Safari和Firefox都能正常运行。

有什么想法或解决方法吗？

div {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  position: relative;
  border-radius: 50%;
}

div span {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  transform: translate(-50%,-50%);
  animation-name: myKeyframe;
  animation-duration: 5ms;
  animation-fill-mode: forwards;
  animation-timing-function: steps(1);
}

@keyframes myKeyframe {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

div span:nth-child(1) {animation-delay: 0ms;}
div span:nth-child(2) {animation-delay: 5ms;}
div span:nth-child(3) {animation-delay: 10ms;}
div span:nth-child(4) {animation-delay: 15ms;}
div span:nth-child(5) {animation-delay: 20ms;}
div span:nth-child(6) {animation-delay: 25ms;}
div span:nth-child(7) {animation-delay: 30ms;}
div span:nth-child(8) {animation-delay: 35ms;}
div span:nth-child(9) {animation-delay: 40ms;}
div span:nth-child(10) {animation-delay: 45ms;}
div span:nth-child(11) {animation-delay: 50ms;}
div span:nth-child(12) {animation-delay: 55ms;}
div span:nth-child(13) {animation-delay: 60ms;}
div span:nth-child(14) {animation-delay: 65ms;}
div span:nth-child(15) {animation-delay: 70ms;}
div span:nth-child(16) {animation-delay: 75ms;}
div span:nth-child(17) {animation-delay: 80ms;}
div span:nth-child(18) {animation-delay: 85ms;}
div span:nth-child(19) {animation-delay: 90ms;}
div span:nth-child(20) {animation-delay: 95ms;}
div span:nth-child(21) {animation-delay: 100ms;}
div span:nth-child(22) {animation-delay: 105ms;}
div span:nth-child(23) {animation-delay: 110ms;}
div span:nth-child(24) {animation-delay: 115ms;}
div span:nth-child(25) {animation-delay: 120ms;}
div span:nth-child(26) {animation-delay: 125ms;}
div span:nth-child(27) {animation-delay: 130ms;}
div span:nth-child(28) {animation-delay: 135ms;}
div span:nth-child(29) {animation-delay: 140ms;}
div span:nth-child(30) {animation-delay: 145ms;}
div span:nth-child(31) {animation-delay: 150ms;}
div span:nth-child(32) {animation-delay: 155ms;}
div span:nth-child(33) {animation-delay: 160ms;}
div span:nth-child(34) {animation-delay: 165ms;}
div span:nth-child(35) {animation-delay: 170ms;}
div span:nth-child(36) {animation-delay: 175ms;}
div span:nth-child(37) {animation-delay: 180ms;}
div span:nth-child(38) {animation-delay: 185ms;}
div span:nth-child(39) {animation-delay: 190ms;}
div span:nth-child(40) {animation-delay: 195ms;}
div span:nth-child(41) {animation-delay: 200ms;}
div span:nth-child(42) {animation-delay: 205ms;}
div span:nth-child(43) {animation-delay: 210ms;}
div span:nth-child(44) {animation-delay: 215ms;}
div span:nth-child(45) {animation-delay: 220ms;}
div span:nth-child(46) {animation-delay: 225ms;}
div span:nth-child(47) {animation-delay: 230ms;}
div span:nth-child(48) {animation-delay: 235ms;}
div span:nth-child(49) {animation-delay: 240ms;}
div span:nth-child(50) {animation-delay: 245ms;}
div span:nth-child(51) {animation-delay: 250ms;}
div span:nth-child(52) {animation-delay: 255ms;}
div span:nth-child(53) {animation-delay: 260ms;}
div span:nth-child(54) {animation-delay: 265ms;}
div span:nth-child(55) {animation-delay: 270ms;}
div span:nth-child(56) {animation-delay: 275ms;}
div span:nth-child(57) {animation-delay: 280ms;}
div span:nth-child(58) {animation-delay: 285ms;}
div span:nth-child(59) {animation-delay: 290ms;}
div span:nth-child(60) {animation-delay: 295ms;}
div span:nth-child(61) {animation-delay: 300ms;}
div span:nth-child(62) {animation-delay: 305ms;}
div span:nth-child(63) {animation-delay: 310ms;}
div span:nth-child(64) {animation-delay: 315ms;}
div span:nth-child(65) {animation-delay: 320ms;}
div span:nth-child(66) {animation-delay: 325ms;}
div span:nth-child(67) {animation-delay: 330ms;}
div span:nth-child(68) {animation-delay: 335ms;}
div span:nth-child(69) {animation-delay: 340ms;}
div span:nth-child(70) {animation-delay: 345ms;}
div span:nth-child(71) {animation-delay: 350ms;}
div span:nth-child(72) {animation-delay: 355ms;}
div span:nth-child(73) {animation-delay: 360ms;}
div span:nth-child(74) {animation-delay: 365ms;}
div span:nth-child(75) {animation-delay: 370ms;}
div span:nth-child(76) {animation-delay: 375ms;}
div span:nth-child(77) {animation-delay: 380ms;}
div span:nth-child(78) {animation-delay: 385ms;}
div span:nth-child(79) {animation-delay: 390ms;}
div span:nth-child(80) {animation-delay: 395ms;}
div span:nth-child(81) {animation-delay: 400ms;}
div span:nth-child(82) {animation-delay: 405ms;}
div span:nth-child(83) {animation-delay: 410ms;}
div span:nth-child(84) {animation-delay: 415ms;}
div span:nth-child(85) {animation-delay: 420ms;}
div span:nth-child(86) {animation-delay: 425ms;}
div span:nth-child(87) {animation-delay: 430ms;}
div span:nth-child(88) {animation-delay: 435ms;}
div span:nth-child(89) {animation-delay: 440ms;}
div span:nth-child(90) {animation-delay: 445ms;}
div span:nth-child(91) {animation-delay: 450ms;}
div span:nth-child(92) {animation-delay: 455ms;}
div span:nth-child(93) {animation-delay: 460ms;}
div span:nth-child(94) {animation-delay: 465ms;}
div span:nth-child(95) {animation-delay: 470ms;}
div span:nth-child(96) {animation-delay: 475ms;}
div span:nth-child(97) {animation-delay: 480ms;}
div span:nth-child(98) {animation-delay: 485ms;}
div span:nth-child(99) {animation-delay: 490ms;}
div span:nth-child(100) {animation-delay: 495ms;}
div span:nth-child(101) {animation-delay: 500ms;}

<div>
<span>0%</span>
<span>1%</span>
<span>2%</span>
<span>3%</span>
<span>4%</span>
<span>5%</span>
<span>6%</span>
<span>7%</span>
<span>8%</span>
<span>9%</span>
<span>10%</span>
<span>11%</span>
<span>12%</span>
<span>13%</span>
<span>14%</span>
<span>15%</span>
<span>16%</span>
<span>17%</span>
<span>18%</span>
<span>19%</span>
<span>20%</span>
<span>21%</span>
<span>22%</span>
<span>23%</span>
<span>24%</span>
<span>25%</span>
<span>26%</span>
<span>27%</span>
<span>28%</span>
<span>29%</span>
<span>30%</span>
<span>31%</span>
<span>32%</span>
<span>33%</span>
<span>34%</span>
<span>35%</span>
<span>36%</span>
<span>37%</span>
<span>38%</span>
<span>39%</span>
<span>40%</span>
<span>41%</span>
<span>42%</span>
<span>43%</span>
<span>44%</span>
<span>45%</span>
<span>46%</span>
<span>47%</span>
<span>48%</span>
<span>49%</span>
<span>50%</span>
<span>51%</span>
<span>52%</span>
<span>53%</span>
<span>54%</span>
<span>55%</span>
<span>56%</span>
<span>57%</span>
<span>58%</span>
<span>59%</span>
<span>60%</span>
<span>61%</span>
<span>62%</span>
<span>63%</span>
<span>64%</span>
<span>65%</span>
<span>66%</span>
<span>67%</span>
<span>68%</span>
<span>69%</span>
<span>70%</span>
<span>71%</span>
<span>72%</span>
<span>73%</span>
<span>74%</span>
<span>75%</span>
<span>76%</span>
<span>77%</span>
<span>78%</span>
<span>79%</span>
<span>80%</span>
<span>81%</span>
<span>82%</span>
<span>83%</span>
<span>84%</span>
<span>85%</span>
<span>86%</span>
<span>87%</span>
<span>88%</span>
<span>89%</span>
<span>90%</span>
<span>91%</span>
<span>92%</span>
<span>93%</span>
<span>94%</span>
<span>95%</span>
<span>96%</span>
<span>97%</span>
<span>98%</span>
<span>99%</span>
<span>100%</span>
</div>