IE中的CSS3动画错误

Question

我正在尝试构建一个简单的CSS3动画，即在一个更大的正方形（居中）内的一个脉冲正方形。

除了在IE上，它似乎工作正常，在动画结束时，内部方块移至其父代的左上方。

我没有找到解决方案，请帮助我。 我究竟做错了什么？

#foo{   
    position: relative;
    display: table;
    margin: auto;
    width: 100px;
    height: 100px;
    top: 50px;
    background: #ccf;
}
#foo::before{   
    content:"";
    position: absolute;
    display: inline-block;
    width: 50%;
    height: 50%;
    left:   50%;
    top: 50%;
    background: #55a;
    animation: 1s ease-in-out infinite pulse;
}

@keyframes pulse {
    0%      {   transform: translate(-50%, -50%) scale(.2,.2); }
    50%     {   transform: translate(-50%, -50%) scale(.8,.8); }
    100%    {   transform: translate(-50%, -50%) scale(.2,.2); }
}

这是代码的JsFiddle

Answer 1

多奇怪。 看来IE和Edge在重新设置后续循环上的转换时遇到了一些问题。

尽管我找不到直接解决浏览器渲染问题的方法（可能是一个错误），但是您的示例看起来像是使用绝对居中技巧的好地方。 由于没有多余的翻译来使其居中，因此它可以在IE中运行，并且更加简单。

工作示例（ jsFiddle ）：

 #foo{ position: relative; display: table; margin: auto; width: 100px; height: 100px; top: 50px; background: #ccf; } #foo::before{ content:""; position: absolute; display: inline-block; width: 50%; height: 50%; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: #55a; animation: 1s ease-in-out infinite pulse; } @keyframes pulse { 0% {transform: scale(.2,.2); } 50% {transform: scale(.8,.8); } 100% {transform: scale(.2,.2); } } 

 <i id="foo"/>