CODEWITHSUNDEEP
cssinternet-explorerwebkit
user3353475
user3353475

Reputation: 83

My website is -webkit oriented and won't work on IE? Anyway to fix that?

Im trying to make a slideshow on the home page of my website 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?

/* 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; }   
}

Upvotes: 1

Views: 76

Answers (1)

Skwal
Skwal

Reputation: 2160

You just need the normal syntax without prefix.

@keyframes myanimation {
    ...
}

Upvotes: 1

Related Questions