IE中的css微调器关键帧动画摇摆不定答案

【问题标题】：css spinner keyframe animation wobbly in IEIE中的css微调器关键帧动画摇摆不定
【发布时间】：2018-01-23 09:18:10
【问题描述】：

我看到有几个人在 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 中跳跃/颠簸。

感谢任何想法:)

【问题讨论】：

我不知道这是否能解决您的问题，但我曾经在 IE 上遇到过类似的错误，帮助我的是在您的关键帧中添加几个步骤以进行旋转。
感谢您的想法，刚刚尝试过，但不幸的是，添加步骤似乎没有帮助。

标签： css internet-explorer animation keyframe

【解决方案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%;

【讨论】：

transformOrigin: 50% 50% 对 IE11 的帮助很大