CSS3 IE 中的动画错误

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"/>

CSS3 IE 中的动画错误

CSS3 animation bug in IE

css

internet-explorer

cross-browser

css-animations

工作示例（jsFiddle）：