CSS动画在Microsoft Edge中不起作用

时间:2019-02-25 12:08:55

标签: css countdown

我在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>

它在Firefox和Chrome中完美运行。

1 个答案:

答案 0 :(得分:1)

根据caniuse.com,“ IE10和IE11不会触发伪元素动画的动画事件”。您可以尝试将动画移出:after元素吗?