css动画无法在microsoft Edge中运行

Question

我在css中制作了倒计时动画，它在微软边缘不起作用。你们知道这个问题吗？

#spin:after {
  content: "";
  animation: countdown 25s linear 1;
  animation-fill-mode: forwards;
}

@keyframes countdown {
  0% {
    content: "25";
  }
  4% {
    content: "24";
  }
  8% {
    content: "23";
  }
  12% {
    content: "22";
  }
  16% {
    content: "21";
  }
  20% {
    content: "20";
  }
  24% {
    content: "19";
  }
  28% {
    content: "18";
  }
  32% {
    content: "17";
  }
  36% {
    content: "16";
  }
  40% {
    content: "15";
  }
  44% {
    content: "14";
  }
  48% {
    content: "13";
  }
  52% {
    content: "12";
  }
  56% {
    content: "11";
  }
  60% {
    content: "10";
  }
  64% {
    content: "9";
  }
  68% {
    content: "8";
  }
  72% {
    content: "7";
  }
  76% {
    content: "6";
  }
  80% {
    content: "5";
  }
  84% {
    content: "4";
  }
  88% {
    content: "3";
  }
  92% {
    content: "2";
  }
  96% {
    content: "1";
  }
  100% {
    content: "0";
  }
}

<div id="countdown">
  <p class="text-bold">Dolorum rem eaque ducimus omnis:<br/>
    <span id="spin"></span></p>
</div>

它在firefox和chrome中完美运行。

Answer 1

根据caniuse.com，“IE10和IE11不会为伪元素动画激活动画事件”。你能尝试将动画移出:after元素吗？