CSS Animations using ViewPort width IE11 issues

This works as expected in Chrome, etc. But in IE11, the red box doesn't make it to the edges of the viewport

HTML

<!--
  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
-->
<article>
  <p>IE11 weirdness when transforming vw inside keyframes</p>
  <strong><span>BLOCK</span></strong>
</article>

CSS

* {
  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;
 ...