title: CSS Animation Not Working in Internet Explorer
body: <p>I am trying to create a header animation where it starts out at 5% width and increases to 100% width. I also need it to move from left: 45%; to left: 0%; I've been able to accomplish exactly what I need in Chrome and FireFox, but it doesn't work in Internet Explorer.</p>
  
  <p>Here's my CSS:</p>
  
  <pre><code>@keyframes header-build {
      from {width: 5%;}
      to {width: 100%;}
      from {left: 45%;}
      to {left: 0%;}
  }
  
   header{
      width: 5%;
      min-width: 5%;
      left: 45%;
   }
  
  .action{
      animation-name: header-build;
      animation-duration: 1s;
      animation-fill-mode: both;
      animation-delay: 1s;
  
      -webkit-animation-name: header-build;
      -webkit-animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      -webkit-animation-delay: 1s;
  
  
      -moz-animation-name: header-build;
      -moz-animation-duration: 1s;
      -moz-animation-fill-mode: both;
      -moz-animation-delay: 1s;
  
      -o-animation-name: header-build;
      -o-animation-duration: 1s;
      -o-animation-fill-mode: both;
      -o-animation-delay: 1s;
  }
  </code></pre>
  
  <p>The class "action" is added to the header on page load via js.</p>
  
  <p>This works in all browsers except for IE, but even in IE it moves from 45% to 0%, the width just doesn't change. </p>
  
  <p>Is there a prefix I'm missing or an alternate way of animating the width in Internet Explorer?</p>
  
  <p>Thanks.</p>
  
  <p>EDIT: I'm using Internet Explorer 11.</p>