只在IE上闪烁CSS动画

Question

除了IE11之外，下面的代码在现代浏览器上运行得很好：

一种简单的伪元素，可以无限期地旋转。

​

@keyframes spin{
  0% {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin{
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin{
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

.spin-container{
  position: relative;
  width: 400px;
  height: 300px;
  margin: 2em auto;
  box-sizing: border-box;
}
  

.spin-container::after{
  content: "";
  position: absolute;
  display: block;
  opacity: 1;
  border-color: rgba(0, 0, 0, 0.2) green green rgba(0, 0, 0, 0.2);
  border-radius: 100%;
  border-style: solid;
  border-width: 10px;
  width: 100px;
  height: 100px;
  bottom: 50px;
  right: calc(50% - 50px);
  border-radius: 100%;
  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
  -ms-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

<div class="spin-container"></div>

​

几个星期以来，我一直在寻找一个原因，但我无法确定可能导致这种情况的财产。

我最初怀疑转换原点不是我的伪元素旋转器的中心，但是对于每个浏览器来说，默认值似乎都是50% 50% 0。

然后我研究了z轴的修改，或者疯狂的继承，但是我肯定什么也没有发现。

有人知道为什么在IE11而不是其他浏览器上会出现这种情况吗？

Answer 1

IE11有一些与硬件加速和CSS动画相关的问题：

• IE 11留下工件而不重绘屏幕
• 不适用于SVG元素的CSS转换属性

微软只是在修复IE11中与安全相关的问题，因此这很可能仍未得到解决。