Imagem de fundo de animação de quadro-chave CSS3 não está mudando no IE - css, css3, animação, css-animações

Então, eu tenho um elemento cuja fronteira e mudança de imagem de fundo (cor da imagem corresponde com a cor da borda) tudo funciona bem, mas não no IE 10 + apenas a cor da borda muda o que estou faltando?

.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;}
}

Respostas:

Tente usar

background-size: 100% 100%;

Ao invés de

background-size: auto auto;

IE tem um problema calculando auto valores ... Você também pode usar todos com seu caso específico de fornecedor, se necessário, cada fornecedor (até mesmo o Chrome x FF) renderiza o tamanho do plano de fundo de maneira diferente:

-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-ms-background-size: 100% 100%;

Bem, a razão é que isso não funciona é quequadros-chave css para mudar imagens de fundo não funciona antes ou depois de elementos e isso é aparentemente como a especificação descreve isso para o IE está seguindo a especificação e todos os outros navegadores não são.

apenas o cromo pode suportar o quadro-chave paraalterações de imagem de fundo Eu tento o sprite, mas se você quiser que a janela imgage ajuste a largura da sua janela pai e mude sua largura e altura dinamicamente. você pode usar apenas% para alcançá-lo, mas será um pouco tremendo durante a animação. eu não tenho ideia sobre isso