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在计算自动值时出现问题...如果需要，您还可以使用所有供应商特定情况，每个供应商（甚至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可以支持关键帧以更改背景图像。我尝试精灵，但如果你想要imgage窗口适合其父窗口的宽度，并动态地改变其宽度和高度。你可以用它来实现它，但在动画过程中它会有点震动。我根本不知道

IE3中的CSS3关键帧动画背景图像没有变化

3 个答案: