CSS 使用 translate3d 的加载程序在 Internet Explorer 11 中不起作用

Question

此 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 应该支持所有内容，但显然有些地方出了问题。

Answer 1

这里的问题是 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 的加载程序在 Internet Explorer 11 中不起作用

CSS loader using translate3d doesn't work in Internet Explorer 11

css

loader