title: CSS3 animation bug in IE
body: <p>I am trying to build a simple CSS3 animation, a pulsing square inside a bigger square (centered).</p>
  
  <p>It seems to work fine except on IE, at the end of the animation the inner square move to up-left of his parent.</p>
  
  <p>I didn't find a solution, help me please. What am I doing wrong?  </p>
  
  <pre><code>#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); }
  }
  </code></pre>
  
  <p>Here a <a href="https://jsfiddle.net/wdL1qenm/" rel="nofollow">JsFiddle of the code</a></p>