title: CSS3 animations only work on page refresh in IE 11
body: <p>A site I have taken over is using CSS3 animations to power the slider.</p>
  
  <p>They seem to work fine across Chrome/Safari/Firefox but for some reason in IE11 they will not load when you initially hit the page for the first time.</p>
  
  <p>Once you're on the page if you refresh or open chrome dev tools then they it work as they should (bar the last one which gets stuck?).</p>
  
  <p><a href="http://creatrixtest.com/thp-dev/" rel="nofollow">SITE HERE >></a></p>
  
  <p><a href="http://creatrix.tinytake.com/sf/MTYxNDk3XzEwMTUyMDE" rel="nofollow">VIDEO EXAMPLE >></a></p>
  
  <p>After browsing a few related articles i've moved the keyframes to the top of my css sheet but it hasn't seemed to of made any difference.</p>
  
  <p>Can anybody tell me what i'm missing?</p>
  
  <pre><code>#slide0 {
      background-image:url('../../img/auto-enrol-slide.png'); 
      background-position: left bottom -600px;
      background-size: cover;
      background-color:#6CA1C1;
  }
  #slide0.animate {
     -webkit-animation-delay: 0s;
     -webkit-animation-duration: 0.85s;
     -webkit-animation-name: backgroundUp2;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-animation-iteration-count: 1;
     -webkit-animation-fill-mode: forwards;
     -moz-animation-delay: 0s;
     -moz-animation-duration: 0.85s;
     -moz-animation-name: backgroundUp2;
     -moz-animation-timing-function: ease-in-out;
     -moz-animation-iteration-count: 1;
     -moz-animation-fill-mode: forwards;
     -o-animation-delay: 0s;
     -o-animation-duration: 0.85s;
     -o-animation-name: backgroundUp2;
     -o-animation-timing-function: ease-in-out;
     -o-animation-iteration-count: 1;
     -o-animation-fill-mode: forwards;
     animation-delay: 0s;
     animation-duration: 0.85s;
     animation-name: backgroundUp2;
     animation-timing-function: ease-in-out;
     animation-iteration-count: 1;
     animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes backgroundUp2 {
      0% {background-position: left bottom -600px; }
      100% {background-position: left bottom -100px; } 
  }
  
  @-moz-keyframes backgroundUp2 {
      0% { background-position: left bottom -600px; }
      100% { background-position: left bottom -100px; } 
  }
  
  @-ms-keyframes backgroundUp2 {
      0% { background-position: left bottom -600px; }
      100% {background-position: left bottom -100px; } 
  }
  
  @keyframes backgroundUp2 {
      0% {background-position: left bottom -600px; }
      100% {background-position: left bottom -100px; } 
  }
  </code></pre>
  
  <p><a href="http://creatrixtest.com/thp-dev/wp-content/themes/theme/css/build/base.css?v=2" rel="nofollow">FULL STYLESHEET >></a></p>