中心在IE中翻译动画

Question

我似乎无法将这个动画集中在IE中。它可以在所有其他浏览器中使用，但在IE中则偏向右侧。尝试过翻译（-50％， - 50％），但仍然得到相同的结果。如果有人能帮我解决这个问题，我将非常感激。我一直在寻找一个解决方案，但没有运气。好像它应该是简单的东西。

[https://jsfiddle.net/d0jmeyu7/2/][1]

<style>
.container {
position: absolute;
background-color: skyblue;
height: 500px;
width: 500px;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: -webkit-flexbox;
display: -moz-flexbox;
display: -o-flexbox;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
-webkit-flex-pack: center;
align-items: center;
justify-content: center;
z-index: 1;
border: 2px solid red;
}

.container > div {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
pointer-events: none;
-webkit-animation: animation 3s forwards;
-moz-animation: animation 3s forwards;
-ms-animation: animation 3s forwards;
-o-animation: animation 3s forwards;
animation: animation 3s forwards;
-webkit-animation-iteration-count: 1;
z-index: 3;
border: 2px solid red;
}

@-webkit-keyframes animation {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-40%);
}
}

@-moz-keyframes animation {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-40%);
}
}

@-o-keyframes animation {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-40%);
}
}

@keyframes animation {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-40%);
}
}
</style>

<div class="container">
<div>
</div>
</div>

Answer 1

当您组合Flexbox和绝对定位的flex项时，您会遇到跨浏览器的不一致行为，如本例所示，其中IE（和Safari）不会使内部div居中。

只需从position: absolute规则中删除.container > div即可。

＆＃13;

＆＃13;

.container {
  position: absolute;
  background-color: skyblue;
  height: 500px;
  width: 500px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -o-flexbox;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  -webkit-flex-pack: center;
  align-items: center;
  justify-content: center;
  z-index: 1;
  border: 2px solid red;
}

.container > div {
  width: 100px;
  height: 100px;
  background-color: red;
  pointer-events: none;
  -webkit-animation: animation 3s forwards;
  -moz-animation: animation 3s forwards;
  -ms-animation: animation 3s forwards;
  -o-animation: animation 3s forwards;
  animation: animation 3s forwards;
  -webkit-animation-iteration-count: 1;
  z-index: 3;
  border: 2px solid red;
}

@-webkit-keyframes animation {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-40%);
  }
}

@-moz-keyframes animation {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-40%);
  }
}

@-o-keyframes animation {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-40%);
  }
}

@keyframes animation {
  0% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-40%);
  }
}

＆＃13;

<div class="container">
  <div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;