title: Keyframes are not working on IE
body: <p>I made some research on Stackoverflow and everywhere on the web about my issue with keyframes on IE, but I couldn't find a proper answer.</p>
  
  <p>I can't get my CSS code below to work on IE and I have no idea how to fix this issue:</p>
  
  <pre><code>body{
    color: #444444;
    text-align: center;
    height: 100%;
    background-color: #fff;
    font-family: 'Montserrat', helvetica, arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    opacity: 0;
    -webkit-animation: showImg 1200ms 600ms forwards ease-out;
    -o-animation: showImg 1200ms 600ms forwards ease-out;
    -moz-animation: showImg 1200ms 600ms forwards ease-out;
    animation: showImg 1200ms 600ms forwards ease-out;
  }
  
  @keyframes showImg{
    100% {
      opacity: 1;
    }
  }
  
  @keyframes hideImg{
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  @-webkit-keyframes showImg{
    100% {
      opacity: 1;
    }
  }
  
  @-webkit-keyframes hideImg{
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  @-o-keyframes showImg{
    100% {
      opacity: 1;
    }
  }
  
  @-o-keyframes hideImg{
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  </code></pre>
  
  <p>It works fine on Firefox and Chrome.</p>
  
  <p>Has anyone already encoutered this problem too? </p>
  
  <p>Thanks a million in advance for your help.</p>