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 of the code

Answer 1

真奇怪。看起来 IE 和 Edge 在后续循环中重置转换时遇到了一些问题。

虽然我找不到直接解决浏览器渲染问题(可能是错误)的方法，但您的示例看起来很适合使用 the absolute centering trick .由于没有额外的翻译来居中，它可以在 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"/>