css - 使用translate3d的CSS加载器在Internet Explorer 11中不起作用

此CSS加载程序在Internet Explorer 11中不起作用，它仅显示第一个关键帧，然后什么也没有发生。

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -1em;
  margin-left: -1em;
  width: calc(2em + 1px);
  height: calc(2em + 1px);
  font-size: 10px;
  line-height: 1em;
  transform: translateZ(0);
}
.loader div {
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  background: orange;
  transform: translate3d(0em, 0em, 0) scale(0);
  animation: loaderStart 0.25s, loaderMove 1.5s 0.25s ease-in-out infinite;
}
.loader div:nth-child(2) {
  opacity: 0.65;
  animation: loaderStart 0.25s 0.5s, loaderMove 1.5s 0.75s ease-in-out infinite;
}
.loader div:nth-child(3) {
  opacity: 0.35;
  animation: loaderStart 0.25s 0.5s, loaderMove 1.5s 1.25s ease-in-out infinite;
}
.nav__top .loader {
  position: relative;
  left: auto;
  top: auto;
  padding-top: 2em;
  margin-left: 2em;
  display: inline-block;
}
.konkurs-search__form-wrapper .loader {
  left: auto;
  margin-top: -0.2em;
  right: 20px;
}

@keyframes loaderStart {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes loaderMove {
  0% {
    transform: translate3d(0, 0em, 0);
  }
  13% {
    transform: translate3d(0, calc(1em + 1px), 0);
  }
  25% {
    transform: translate3d(0, calc(1em + 1px), 0);
  }
  38% {
    transform: translate3d(calc(1em + 1px), calc(1em + 1px), 0);
  }
  50% {
    transform: translate3d(calc(1em + 1px), calc(1em + 1px), 0);
  }
  63% {
    transform: translate3d(calc(1em + 1px), 0em, 0);
  }
  75% {
    transform: translate3d(calc(1em + 1px), 0em, 0);
  }
  88% {
    transform: translate3d(0em, 0em, 0);
  }
  100% {
    transform: translate3d(0em, 0em, 0);
  }
}

<div class="loader">
  <div></div>
  <div></div>
  <div></div>
</div>

有人可以看到问题所在吗？我有一个想法，可能是translate3d，但不确定。
如果您访问caniuse.com，则Internet Explorer 11似乎应支持所有内容，但显然出了点问题。

最佳答案

这里的问题是transform：translate3d（calc（1em + 1px），
我认为calc方法在translate或translate3d内部不起作用。

我进行了一些更改，但似乎可行，

@keyframes loaderMove {
  0% {
    transform: translate3d(0, 0em, 0);
  }
  13% {
    transform: translate3d(0, 17px, 0);
  }
  25% {
    transform: translate3d(0, 17px, 0);
  }
  38% {
    transform: translate3d(17px, 16px, 0);
  }
  50% {
    transform: translate3d(17px, 17px, 0);
  }
  63% {
    transform: translate3d(17px, 0em, 0);
  }
  75% {
    transform: translate3d(17px, 0em, 0);
  }
  88% {
    transform: translate3d(0em, 0em, 0);
  }
  100% {
    transform: translate3d(0em, 0em, 0);
  }
}

关于css - 使用translate3d的CSS加载器在Internet Explorer 11中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50983253/