CODEWITHSUNDEEP
csstransform
Jack
Jack

Reputation: 301

Why doesn't my CSS colour transform work in IE10?

Here is my code:

/* Tile colour rotation */
/*tile 1 */
@-webkit-keyframes bwe1 {
0% {background-color: #39f;}
15% {background-color: #8bc5d1;}
30% {background-color: #f8cb4a;}
45% {background-color: #95b850;}
60% {background-color: #944893;}
75% {background-color: #c71f00;}
90% {background-color: #bdb280;}
100% {background-color: #39f;}
}
@-moz-keyframes bwe1 {
0% {background-color: #39f;}
15% {background-color: #8bc5d1;}
30% {background-color: #f8cb4a;}
45% {background-color: #95b850;}
60% {background-color: #944893;}
75% {background-color: #c71f00;}
90% {background-color: #bdb280;}
100% {background-color: #39f;}
}

/* Colour changing tiles */
.metro-layout .cycle1 {-webkit-animation: bwe1 20s infinite alternate linear;   -moz-animation: bwe1 20s infinite alternate linear; }

These are the two sections of code I am using to define the colour rotate animation but it's not working in IE10. it is however working in Firefox, Safari and Chrome...

Please help!

Upvotes: 3

Views: 109

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

you should also define

-ms-animation: ...

and 

@-ms-keyframes bwe1 { ... }

Since -webkit- and -moz- are vendor specific prefixes which IE simply ignores.

Note that you should also define the unprefixed version (animation, @keyframes) of your code for newer browsers, like latest Firefox versions.

Upvotes: 3

Related Questions