代码之家 › 专栏 › 技术社区 › MartinDK81

使用translate3d的css加载器在internet explorer 11中不工作

loader css

MartinDK81 · 技术社区 · 6 年前

这个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>

有人知道问题出在哪里吗?我有一个想法,可能是翻译3d,但不确定。看起来Internet Explorer 11应该支持所有内容,如果您查看caniuse.com,显然有问题。

1 回复 | 直到 6 年前

Avinash Maurya 6 年前

问题是 变换:平移3d(计算(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);
  }
}