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

【问题标题】：CSS3 keyframe animation background image not changing in IECSS3关键帧动画背景图像在IE中没有改变
【发布时间】：2016-11-28 11:28:38
【问题描述】：

所以我有一个元素，它的边框和背景图像发生变化（图像颜色与边框颜色对应）它一切正常，但在 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;}
}

【问题讨论】：

你能用这个做一个 JSFiddle 吗？ jsfiddle.net

标签： css animation css-animations

【解决方案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%;

【讨论】：

好的，然后用你的 CSS 和 HTML 创建一个小提琴，最好考虑一下 ;)
该死的... IE 不支持这种方式的背景图像的关键帧动画。仅使用精灵表。
IE 是 IE... 像往常一样呵呵。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：