Darkrum Darkrum - 10 days ago 4
CSS Question

CSS3 keyframe animation background image not changing in IE

So i have a a element whose border and background image change (image color corresponds with the border color) it all works fine but not in IE 10+ only the border color changes what am i missing?

.circleGreen:before {
border: 4px solid;
background: url(img/adapts1.png) no-repeat center center;
background-size: auto auto;
-webkit-animation: mymove 12s infinite;
-moz-animation: mymove 12s infinite;
-ms-animation: mymove 12s infinite;
-o-animation: mymove 12s infinite;
animation: mymove 12s infinite;
}
@-webkit-keyframes mymove {
0% {border: 4px solid #18f6b0; background: url(img/adapts1.png) no-repeat center center;}
25% {border: 4px solid #f7ba44; background: url(img/adapts3.png) no-repeat center center;}
50% {border: 4px solid #f6135e; background: url(img/adapts2.png) no-repeat center center;}
75% {border: 4px solid #2ccafe; background: url(img/adapts4.png) no-repeat center center;}
100% {border: 4px solid #18f6b0; background: url(img/adapts1.png) no-repeat center center;}
}
@-moz-keyframes mymove {
0% {border: 4px solid #18f6b0; background: url(img/adapts1.png) no-repeat center center;}
25% {border: 4px solid #f7ba44; background: url(img/adapts3.png) no-repeat center center;}
50% {border: 4px solid #f6135e; background: url(img/adapts2.png) no-repeat center center;}
75% {border: 4px solid #2ccafe; background: url(img/adapts4.png) no-repeat center center;}
100% {border: 4px solid #18f6b0; background: url(img/adapts1.png) no-repeat center center;}
}
@-ms-keyframes mymove {
0% {border: 4px solid #18f6b0; background: url(img/adapts1.png) no-repeat center center;}
25% {border: 4px solid #f7ba44; background: url(img/adapts3.png) no-repeat center center;}
50% {border: 4px solid #f6135e; background: url(img/adapts2.png) no-repeat center center;}
75% {border: 4px solid #2ccafe; background: url(img/adapts4.png) no-repeat center center;}
100% {border: 4px solid #18f6b0; background: url(img/adapts1.png) no-repeat center center;}
}
@-o-keyframes mymove {
0% {border: 4px solid #18f6b0; background: url(img/adapts1.png) no-repeat center center;}
25% {border: 4px solid #f7ba44; background: url(img/adapts3.png) no-repeat center center;}
50% {border: 4px solid #f6135e; background: url(img/adapts2.png) no-repeat center center;}
75% {border: 4px solid #2ccafe; background: url(img/adapts4.png) no-repeat center center;}
100% {border: 4px solid #18f6b0; background: url(img/adapts1.png) no-repeat center center;}
}
@keyframes mymove {
0% {border: 4px solid #18f6b0; background: url(img/adapts1.png) no-repeat center center;}
25% {border: 4px solid #f7ba44; background: url(img/adapts3.png) no-repeat center center;}
50% {border: 4px solid #f6135e; background: url(img/adapts2.png) no-repeat center center;}
75% {border: 4px solid #2ccafe; background: url(img/adapts4.png) no-repeat center center;}
100% {border: 4px solid #18f6b0; background: url(img/adapts1.png) no-repeat center center;}
}

Answer

Well the reason is that this doesn't work is that css key frames to change background images does not work on before or after elements and this is apparently how the spec outlines it so IE is following the spec and all other browsers are not.