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%;

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

1 个答案: