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>