IE中的CSS旋转器关键帧动画抖动

Question

我已经看到几个人在IE中遇到“摆动”微调器动画的问题，并且在大多数情况下，建议使用图像而不是对边框进行动画处理，但是这对我不起作用，因为img加载时间太长了IE，并且不会及时显示。 （网站已经开始重新加载，并且根本不会显示微调器。）因此，我想问问是否有人对修复公司使用的代码有其他想法（较少）：

@keyframes spinAround {
  from {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.is-loading {
  display: inline;
  position: absolute;
  top: 50%;
  box-sizing: inherit;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, .8);
    box-sizing: inherit;
  }

  &::after {
    height: 12px;
    width: 12px;
    margin-left: -10px;
    margin-top: -10px;
    border-width: 4px;
    border-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, .4) rgba(255, 255, 255, .4) rgba(255, 255, 255, .4);
    top: 50%;
    content: "";
    display: block;
    position: absolute;
    border-style: solid;
    border-radius: 50%;
    animation: spinAround 700ms infinite linear;
    box-sizing: inherit;

  }
}

然后，我只需在div上切换类即可。 在Chrome或FF中完美运行，但可能是由于IE边界半径问题导致IE中出现跳动/颠簸。

谢谢您的任何想法:)

Answer 1

在关键帧中添加以下行：

-ms-transform-origin: 100%;

像这样：

from {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -ms-transform-origin: 100%;
  }

如果您正在旋转一个圆圈，则应使用以下行：

-ms-transform-origin: 50% 50%;