title: CSS3 animation/keyframes, transforming with vw in IE11 issues
body: <p>I'm animating an element across a screen, but in IE11, weird things are happening. <em>I'm in development, so I can't share the live code.</em> But I created a fiddle to replicate the problem.  </p>
  
  <p>Basically, when I use viewport width aka <code>vw</code> with <code>transform:translateX();</code> inside a <code>@keyframes</code> to use in an animation, IE11 doesn't reflect the width of the <code>viewport</code> in the animation. </p>
  
  <p>So the Fiddle I created takes an element that is positioned in the center of the <code>viewport</code>:</p>
  
  <ol>
  <li>starts it at the left edge of the screen with half of the element
  appearing </li>
  <li>moves to the center of the viewport, pauses </li>
  <li>and then moves to the right edge of the viewport, with half the element off of the screen</li>
  </ol>
  
  <p>Fiddle: <a href="https://jsfiddle.net/Bushwazi/7xe0wy8z/4/" rel="nofollow">https://jsfiddle.net/Bushwazi/7xe0wy8z/4/</a></p>
  
  <ul>
  <li>In the website I'm working on, IE11 animates the element as if the
  page were 10 times wider</li>
  <li>In the fiddle, the animation runs in reverse
  and never makes it to the edge of the page.</li>
  </ul>
  
  <p>So in both cases, IE11 isn't using the correct width for <code>vw</code> inside CSS animations.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!--
    The animation on the red block should start half on the screen, pause at the center of the screen and then finish by pausing at the edge of the screen, half of the box off of the screen
  --&gt;
  &lt;article&gt;
    &lt;p&gt;IE11 weirdness when transforming vw inside keyframes&lt;/p&gt;
    &lt;strong&gt;&lt;span&gt;BLOCK&lt;/span&gt;&lt;/strong&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
    margin: 0;
    padding: 0;
  }
  
  @-webkit-keyframes movee {
    0% {
      -webkit-transform: translateX(-50vw);
              transform: translateX(-50vw)
    }
    10% {
      -webkit-transform: translateX(-50vw);
              transform: translateX(-50vw)
    }
    40% {
      -webkit-transform: translateX(0vw);
              transform: translateX(0vw)
    }
    60% {
      -webkit-transform: translateX(0vw);
              transform: translateX(0vw)
    }
    90% {
      -webkit-transform: translateX(50vw);
              transform: translateX(50vw)
    }
    100% {
      -webkit-transform: translateX(50vw);
              transform: translateX(50vw)
    }
  }
  
  @keyframes movee {
    0% {
      -webkit-transform: translateX(-50vw);
              transform: translateX(-50vw)
    }
    10% {
      -webkit-transform: translateX(-50vw);
              transform: translateX(-50vw)
    }
    40% {
      -webkit-transform: translateX(0vw);
              transform: translateX(0vw)
    }
    60% {
      -webkit-transform: translateX(0vw);
              transform: translateX(0vw)
    }
    90% {
      -webkit-transform: translateX(50vw);
              transform: translateX(50vw)
    }
    100% {
      -webkit-transform: translateX(50vw);
              transform: translateX(50vw)
    }
  }
  
  body {
    background-color: #eee;
    background-image: -webkit-linear-gradient(left, black 50%, transparent 50.01%);
    background-image: linear-gradient(90deg, black 50%, transparent 50.01%);
    background-size: 20% 100%;
    background-position: 0 0;
    font-family: sans-serif;
    height: 100vh;
  }
  
  article {
    position: relative;
    height: 100%;
    width: 100%;
    display: block;
  }
  
  p {
    width: 100%;
    background: #FFF;
    text-align: center;
    padding: 1em 0;
  }
  
  strong {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100px;
    width: 100px;
    background: red;
    border: blue solid 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    text-align: center;
    margin: -50px 0 0 -50px;
    -webkit-animation: movee 5.0s linear infinite 0.0s;
            animation: movee 5.0s linear infinite 0.0s;
  }
  </code></pre>