CSS3在其他动画运行时动画背景（URL图像）

我正在尝试执行更改div类的背景图像的动画。动画似乎起作用，当我改变动画完成的类时。但是，当我在动画运行时再次更改类时，它立即停止并且设置了最后一个类（没有动画）。CSS3在其他动画运行时动画背景（URL图像）

我在颜色而不是图像上做了同样的事情，当我在运行动画的时候改变了div类的时候，新的动画与前一个动画是“内插的”。

有一些方法可以解决这个问题？

这里是一个片段，您可以重现：

.base-class { 
 
    transition: background linear 1s; 
 
} 
 

 
.base-class.green { 
 
    background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Flag_of_Libya_(1977-2011).svg/1280px-Flag_of_Libya_(1977-2011).svg.png"); 
 
} 
 

 
.base-class.lightblue { 
 
    background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/F1_light_blue_flag.svg/2000px-F1_light_blue_flag.svg.png"); 
 
} 
 

 
.base-class.yellow { 
 
    background: url("https://lh3.googleusercontent.com/nhzkOTPaoWAYfO-LeklB_kPd5bAqm43D87Q3eHlK3alIse8rgrYPE74epbbbZ2b4EsY=w300"); 
 
} 
 

 
.base-class.green2 { 
 
    background: green; 
 
} 
 

 
.base-class.lightblue2 { 
 
    background: lightblue; 
 
} 
 

 
.base-class.yellow2 { 
 
    background: yellow; 
 
} 
 

 
.base-class.my-class { 
 
    color: red; 
 
    font-size: 3em; 
 
}

<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <h1>With Images</h1> 
 
    <div> 
 
    <input type="button" value="clear" onclick="document.getElementById('target1').className = 'base-class';"> 
 

 
    <input type="button" value="my-class" onclick="document.getElementById('target1').className = 'base-class my-class';"> 
 

 
    <input type="button" value="green" onclick="document.getElementById('target1').className = 'base-class green';"> 
 

 
    <input type="button" value="lightblue" onclick="document.getElementById('target1').className = 'base-class lightblue';"> 
 

 
    <input type="button" value="yellow" onclick="document.getElementById('target1').className = 'base-class yellow';"> 
 
    <br> 
 
    <div id="target1" class="base-class"> 
 
     <br><br><br><br><br> Sample Text 
 
     <br><br><br><br><br> 
 
    </div> 
 
    </div> 
 
    <h1>With Colors</h1> 
 
    <div> 
 
    <input type="button" value="clear" onclick="document.getElementById('target2').className = 'base-class';"> 
 

 
    <input type="button" value="my-class" onclick="document.getElementById('target2').className = 'base-class my-class';"> 
 

 
    <input type="button" value="green" onclick="document.getElementById('target2').className = 'base-class green2';"> 
 

 
    <input type="button" value="lightblue" onclick="document.getElementById('target2').className = 'base-class lightblue2';"> 
 

 
    <input type="button" value="yellow" onclick="document.getElementById('target2').className = 'base-class yellow2';"> 
 
    <br> 
 
    <div id="target2" class="base-class"> 
 
     <br><br><br><br><br> Sample Text 
 
     <br><br><br><br><br> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

来源

2017-02-22 vgc

实际上，将背景图像从一个源移动到另一个源并不是一个好主意（在您的情况下进行过渡）。根据CSS规范，背景图像不是可动态或可转换的属性。请参阅此线程潜在的陷阱 - http://stackoverflow.com/questions/35994521/background-image-in-keyframe-does-not-display-in-firefox-or-internet-explorer/36005661#36005661 – Harry

'.base -class'没有'background'属性。所以它不能制作它。另外，正如@Harry所说，根据规范，“背景”不是可动画的或可转换的。 – LuudJacobs

@LuudJacobs如果按下“绿色”按钮，“有图像”部分突然设置颜色，但如果在绿色时按“黄色”，则可以看到动画。另一方面，如果你按下“绿色”按钮，你会看到动画，然后当你按下“黄色”，你会看到下一个动画（如“有图像”）。当再次按下例如“绿色”时，在动画结束之前，再次按“黄色”，在“有图像”部分中黄色到绿色动画停止并设置为黄色，但在“有颜色”部分，动画从黄色变为绿色是“修改”完成黄色 – vgc

我在Android的默认测试，iOS的Safari浏览器和Windows的Chrome浏览器和它有相同的行为（动画做，但不是在其他人正在运行时），但是在Internet Explorer中并没有做任何事情。

就像@哈里所说的，“background-image”属性起初不支持css动画，它可以在一些浏览器中工作，但它不是一个标准，所以我必须找到一个选择。

来源

2017-02-23 08:51:43 vgc

CSS3在其他动画运行时动画背景（URL图像）

回答

相关问题