title: CSS animation doesn't working on IE11 when using transform and position left together
body: <p>The <code>@keyframes marquee2 {}</code> does not working on Internet Explorer 11 and also not perfectly working on Edge too. All the other major browsers like Firefox or Chrome are working very well. Still don't know what the reason behind breaking the animation. Why the animation not working when using <code>left</code> with<code>transform: translate(0, 0)</code> ? </p>
  
  <p>Demo : <a href="https://codepen.io/athimannil/full/bojLQN" rel="nofollow noreferrer">https://codepen.io/athimannil/full/bojLQN</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  
  .container {
    width: 90vw;
  }
  
  .container {
    overflow: hidden;
    position: relative;
    height: 200px;
  }
  
  .marquee-wrap {
    position: absolute;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-animation: marquee2 20s linear infinite;
    animation: marquee2 20s linear infinite;
  }
  
  .marquee-wrap .marquee-img {
    width: 200px;
    padding: 0 1rem;
  }
  
  .marquee-wrap .marquee-img img {
    max-width: 100%;
  }
  
  @-webkit-keyframes marquee2 {
    0% {
      left: 0;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    50% {
      left: 100%;
      -webkit-transform: translate(-100%, 0);
      transform: translate(-100%, 0);
    }
    100% {
      left: 0;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }
  
  @keyframes marquee2 {
    0% {
      left: 0;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    50% {
      left: 100%;
      -webkit-transform: translate(-100%, 0);
      transform: translate(-100%, 0);
    }
    100% {
      left: 0;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="marquee-wrap"&gt;
      &lt;div class="marquee-img"&gt;&lt;img src="http://via.placeholder.com/200x200?text=Logo 01" alt=""&gt;&lt;/div&gt;
      &lt;div class="marquee-img"&gt;&lt;img src="http://via.placeholder.com/200x200?text=Logo 02" alt=""&gt;&lt;/div&gt;
      &lt;div class="marquee-img"&gt;&lt;img src="http://via.placeholder.com/200x200?text=Logo 03" alt=""&gt;&lt;/div&gt;
      &lt;div class="marquee-img"&gt;&lt;img src="http://via.placeholder.com/200x200?text=Logo 04" alt=""&gt;&lt;/div&gt;
      &lt;div class="marquee-img"&gt;&lt;img src="http://via.placeholder.com/200x200?text=Logo 05" alt=""&gt;&lt;/div&gt;
      &lt;div class="marquee-img"&gt;&lt;img src="http://via.placeholder.com/200x200?text=Logo 06" alt=""&gt;&lt;/div&gt;
      &lt;div class="marquee-img"&gt;&lt;img src="http://via.placeholder.com/200x200?text=Logo 07" alt=""&gt;&lt;/div&gt;
      &lt;div class="marquee-img"&gt;&lt;img src="http://via.placeholder.com/200x200?text=Logo 08" alt=""&gt;&lt;/div&gt;
      &lt;div class="marquee-img"&gt;&lt;img src="http://via.placeholder.com/200x200?text=Logo 09" alt=""&gt;&lt;/div&gt;
      &lt;div class="marquee-img"&gt;&lt;img src="http://via.placeholder.com/200x200?text=Logo 10" alt=""&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>