CSS-анимация не работает в Microsoft Edge

#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>