0
我似乎无法将此动画集中在IE中。在所有其他浏览器中都很好，但是在IE中，它在右边。已尝试翻译（-50％，-50％），但仍得到相同的结果。如果有人能帮我弄清楚这一点，我会非常感激。我一直在寻找解决方案，但一直没有运气。似乎它应该是简单的。IE中的translateY动画
[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>