0
Ich kann nicht scheinen, diese Animation in IE zu zentrieren. Es ist in allen anderen Browsern in Ordnung, aber in IE ist es auf der rechten Seite. Habe versucht zu übersetzen (-50%, -50%), aber immer noch das gleiche Ergebnis. Wenn mir jemand helfen kann, das herauszufinden, wäre ich sehr dankbar. Ich habe eine Weile nach einer Lösung gesucht, aber kein Glück gehabt. Scheint so, als sollte es etwas Einfaches sein.Center translateY Animation in IE
[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>