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>