title: My website is -webkit oriented and won't work on IE? Anyway to fix that?
body: <p>Im trying to make a slideshow on the home page of my <a href="http://www.fblacazanovas.com/index.html" rel="nofollow">website</a> and the website has to be multi-browser compatible but the most trouble I am having is with IE, more specifically IE 10+
  how can i turn -webkit-keyframes into something IE compatible?</p>
  
  <pre><code>/* ANIMATION */
  /*
  @-moz-keyframes cycle {
      0%  { top:0px; }
      4%  { top:0px; } 
      16% { top:0px; opacity:1; z-index:0; } 
      20% { top:325px; opacity:0; z-index:0; } 
      21% { top:-325px; opacity:0; z-index:-1; }
      92% { top:-325px; opacity:0; z-index:0; }
      96% { top:-325px; opacity:0; }
      100%{ top:0px; opacity:1; }
  
  }
  
  */
  @-webkit-keyframes cycletwo {
      0%  { top:-325px; opacity:0; }
      16% { top:-325px; opacity:0; }
      20% { top:0px; opacity:1; }
      24% { top:0px; opacity:1; } 
      36% { top:0px; opacity:1; z-index:0; } 
      40% { top:325px; opacity:0; z-index:0; }
      41% { top:-325px; opacity:0; z-index:-1; } 
      100%{ top:-325px; opacity:0; z-index:-1; }
  }
  @-webkit-keyframes cyclethree {
      0%  { top:-325px; opacity:0; }
      36% { top:-325px; opacity:0; }
      40% { top:0px; opacity:1; }
      44% { top:0px; opacity:1; } 
      56% { top:0px; opacity:1; } 
      60% { top:325px; opacity:0; z-index:0; }
      61% { top:-325px; opacity:0; z-index:-1; } 
      100%{ top:-325px; opacity:0; z-index:-1; }
  }
  @-webkit-keyframes cyclefour {
      0%  { top:-325px; opacity:0; }
      56% { top:-325px; opacity:0; }
      60% { top:0px; opacity:1; }
      64% { top:0px; opacity:1; }
      76% { top:0px; opacity:1; z-index:0; }
      80% { top:325px; opacity:0; z-index:0; }
      81% { top:-325px; opacity:0; z-index:-1; }
      100%{ top:-325px; opacity:0; z-index:-1; }
  }
  @-webkit-keyframes cyclefive {
      0%  { top:-325px; opacity:0; }
      76% { top:-325px; opacity:0; }
      80% { top:0px; opacity:1; }
      84% { top:0px; opacity:1; }
      96% { top:0px; opacity:1; z-index:0; }
      100%{ top:325px; opacity:0; z-index:0; }
  }
  
  
  @-moz-keyframes cycle {
      0%  { top:0px; }
      4%  { top:0px; } 
      16% { top:0px; opacity:1; z-index:0; } 
      20% { top:325px; opacity:0; z-index:0; } 
      21% { top:-325px; opacity:0; z-index:-1; }
      92% { top:-325px; opacity:0; z-index:0; }
      96% { top:-325px; opacity:0; }
      100%{ top:0px; opacity:1; }
  
  }
  
  @-moz-keyframes cycletwo {
      0%  { top:-325px; opacity:0; }
      16% { top:-325px; opacity:0; }
      20% { top:0px; opacity:1; }
      24% { top:0px; opacity:1; } 
      36% { top:0px; opacity:1; z-index:0; } 
      40% { top:325px; opacity:0; z-index:0; }
      41% { top:-325px; opacity:0; z-index:-1; }  
      100%{ top:-325px; opacity:0; z-index:-1; }
  }
  @-moz-keyframes cyclethree {
      0%  { top:-325px; opacity:0; }
      36% { top:-325px; opacity:0; }
      40% { top:0px; opacity:1; }
      44% { top:0px; opacity:1; } 
      56% { top:0px; opacity:1; z-index:0; } 
      60% { top:325px; opacity:0; z-index:0; } 
      61% { top:-325px; opacity:0; z-index:-1; }
      100%{ top:-325px; opacity:0; z-index:-1; }
  }
  @-moz-keyframes cyclefour {
      0%  { top:-325px; opacity:0; }
      56% { top:-325px; opacity:0; }
      60% { top:0px; opacity:1; }
      64% { top:0px; opacity:1; }
      76% { top:0px; opacity:1; z-index:0; }
      80% { top:325px; opacity:0; z-index:0; }
      81% { top:-325px; opacity:0; z-index:-1; }
      100%{ top:-325px; opacity:0; z-index:-1; }
  }
  @-moz-keyframes cyclefive {
      0%  { top:-325px; opacity:0; }
      76% { top:-325px; opacity:0; }
      80% { top:0px; opacity:1; }
      84% { top:0px; opacity:1; }
      96% { top:0px; opacity:1; z-index:0; }
      100%{ top:325px; opacity:0; z-index:0; }
  }
  
  /* ANIMATION BAR */
  @-moz-keyframes fullexpand {
      0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
      4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
     16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
     17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
     18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }   
  }
  
  @-webkit-keyframes fullexpand {
      0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
      4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
     16%, 36%, 56%, 76%, 96% { width:100%; opacity:1; }
     17%, 37%, 57%, 77%, 97% { width:100%; opacity:1; }
     18%, 38%, 58%, 78%, 98% { width:100%; opacity:1; }   
  }
  </code></pre>