CSS 动画在任何地方都可以工作，但不能在 IE 和 Edge 中工作？答案

【问题标题】：CSS animation working everywhere but not in IE and edge?CSS 动画在任何地方都可以工作，但不能在 IE 和 Edge 中工作？
【发布时间】：2017-04-22 06:30:37
【问题描述】：

一切都在标题中，我无法弄清楚为什么我的动画在任何地方都可以工作，但在 IE 和 Edge 中却不行。我在哪里遗漏了什么？

这是我的动画的关键帧和相关的JS fiddle

$(document).ready(function () {
  $('#toggle').hide();
});

$('#toggler').click(function () {
  $("#toggle").delay(800).velocity("slideDown", {
    duration: 1200
  });

  $("#footer").delay(800).velocity("scroll", {
    duration: 1200
  });

});

body {
  overflow-x:hidden;
  overflow-y:scroll;
}
#content1 {
  width:100%;
  height:800px;
  background-color:grey;
  position:relative;
}
#toggler {
  position: absolute; 
  left: 0; 
  right: 0;
  bottom:10px;
  margin-left: auto; 
  margin-right: auto; 
  width: 100px;
  height:50px;
}
#footer {
  background-color:black;
  width:100%;
  height:150px;
}
.slide-up {
  display: block;
  height: auto;
  width:100%;
}
.animate {  
  animation: super-zgeger-mob 5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  z-index: 9999;
  overflow: hidden;
  -webkit-animation: super-zgeger-mob linear 5s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode: forwards;
  -moz-animation: super-zgeger-mob linear 5s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode: forwards;
  -o-animation: super-zgeger-mob linear 5s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode: forwards;
  -ms-animation: super-zgeger-mob linear 5s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode: forwards;
}
@keyframes super-zgeger-mob {
  0% {
    transform: translate(-90%, 0%);
    opacity: 0;
  }
  15% {
    transform: translate(-90%, 0%);
    opacity: 1;
  }
  50% {
    transform: translate(0%, 0%);
  }
  75% {
    transform: translate(-5%, 0%) rotate(10deg);
  }
  100% {
    transform: translate(150%, 0%);
  }
}
@-moz-keyframes super-zgeger-mob {
  0% {
    -moz-transform: translate(-90%, 0%);
    opacity: 0;
  }
  15% {
    -moz-transform: translate(-90%, 0%);
    opacity: 1;
  }
  50% {
    -moz-transform: translate(0%, 0%);
  }
  75% {
    -moz-transform: translate(-5%, 0%) rotate(10deg);
  }
  100% {
    -moz-transform: translate(150%, 0%);
  }
}
@-webkit-keyframes super-zgeger-mob {
  0% {
    -webkit-transform: translate(-90%, 0%);
    opacity: 0;
  }
  15% {
    -webkit-transform: translate(-90%, 0%);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(0%, 0%);
  }
  75% {
    -webkit-transform: translate(-5%, 0%) rotate(10deg);
  }
  100% {
    -webkit-transform: translate(150%, 0%);
  }
}
@-o-keyframes super-zgeger-mob {
  0% {
    -o-transform: translate(-90%, 0%);
    opacity: 0;
  }
  15% {
    -o-transform: translate(-90%, 0%);
    opacity: 1;
  }
  50% {
    -o-transform: translate(0%, 0%);
  }
  75% {
    -o-transform: translate(-5%, 0%) rotate(10deg);
  }
  100% {
    -o-transform: translate(150%, 0%);
  }
}
@-ms-keyframes super-zgeger-mob {
  0% {
    -ms-transform: translate(-90%, 0%);
    opacity: 0;
  }
  15% {
    -ms-transform: translate(-90%, 0%);
    opacity: 1;
  }
  50% {
    -ms-transform: translate(0%, 0%);
  }
  75% {
    -ms-transform: translate(-5%, 0%) rotate(10deg);
  }
  100% {
    -ms-transform: translate(150%, 0%);
  }
}

<div id=content1>
    <button id="toggler">
    push me
    </button>
</div>
<div id="toggle">
  <div id="animation" style="position: relative; left: 0; top: 0;">
    <img src="http://image.gilawhost.com/16/11/09/jzjhk7o0.png" class="slide-up"/>
    <img id="rolling" src="http://image.gilawhost.com/16/11/09/6d7tsk5k.png" class="slide-up animate" style="position: absolute; top: 0%; left: 0%; z-index: 99;" />
  </div>
</div>
<div id=footer> 
</div>

【问题讨论】：

fiddle.jshell.net/7AuQM/24 在 IE11 中为我工作。（删除了供应商前缀）
仅供参考：您应该始终先编写带供应商前缀的版本，最后编写无前缀的版本。
@Kyle 这很奇怪，因为这个小提琴在我的 IE 11 或我的边缘浏览器中也不起作用。
@CBroe 感谢您的提示，但为什么呢？
@Geniom，因为浏览器将遍历所有供应商前缀的前缀，直到找到自己的前缀，而忽略其他前缀。如果它不需要供应商前缀，它将使用标准语法。顺便说一句：具有关键帧动画的最新浏览器不再需要供应商前缀。

标签： css internet-explorer css-animations microsoft-edge

【解决方案1】：

我想，在 translate() 属性上使用 .animate 上的定位（左：-90% 到所需位置）对你有用。 translate 仅受 IE 11 部分支持，在 Opera 中也无法正常工作。 http://caniuse.com/#feat=transforms2d.

【讨论】：