CSS 动画无处不在，但在 IE 和 Edge 中不行？

Question

一切都在标题中，我不明白为什么我的动画在任何地方都有效，但在 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>

Answer 1

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