CSS3关键帧动画背景图片在IE中没有改变

Question

所以我有一个元素，其边框和背景图像发生变化（图像颜色与边框颜色相对应）它一切正常但在 IE 10+ 中不是，只有边框颜色发生变化我错过了什么？

.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 1

尝试使用

background-size: 100% 100%;

而不是

background-size: auto auto;

IE 在计算 auto 值时出现问题...如果需要，您也可以将 all 与其供应商特定情况一起使用，每个供应商（甚至 Chrome x FF）以不同方式呈现背景大小：

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

Answer 2

嗯，原因是这不起作用，因为 css 更改背景图像的关键帧在元素之前或之后不起作用，这显然是规范概述的方式，因此 IE 遵循规范和所有其他浏览器都不是。

Answer 3

只有chrome可以支持背景图片变化的关键帧。我尝试了精灵，但是如果你想让图像 window 适应它的父亲 window 的宽度并动态改变它的宽度和高度。可以直接用%来实现，但是动画的时候会有点晃动。我不知道

CSS3关键帧动画背景图片在IE中没有改变

CSS3 keyframe animation background image not changing in IE

css

animation

css-animations