0
Ich versuche eine Animation des Hintergrundbildes durchzuführen, indem ich die div-Klasse ändere. Die Animation scheint zunächst zu funktionieren, wenn ich die Klasse ändere ist die Animation perfekt gemacht. Wenn ich jedoch die Klasse während der Ausführung der Animation erneut ändere, stoppt sie sofort und die letzte Klasse wird gesetzt (ohne Animation).CSS3 Hintergrund (URL-Bild) animieren, während andere Animation läuft
Ich tat dasselbe mit Farben anstelle von Bildern und wenn ich die Div-Klasse änderte, während die Animation lief, wurde die neue Animation mit der vorherigen "interpoliert".
Es gibt eine Möglichkeit, das zu lösen ??
Hier ein Ausschnitt ist, wo Sie es reproduzieren können:
.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>
Eigentlich ist es keine gute Idee, das Hintergrundbild von einer Quelle zur anderen (Übergang in Ihrem Fall) zu animieren. Hintergrundbild ist keine animierbare oder übergangsfähige Eigenschaft gemäß CSS-Spezifikation. Siehe diesen Thread für mögliche Fallstricke - http://stackoverflow.com/questions/35994521/background-image-in-keyframe-does-not-display-in-firefox-or-internet-explorer/36005661#36005661 – Harry
'.base -Klasse hat keine Hintergrundeigenschaft. Es kann also nicht animiert werden. Wie @Harry sagte, ist "Hintergrund" laut Spezifikation nicht animierbar oder veränderbar. – LuudJacobs
@LuudJacobs auf "Mit Bildern" Abschnitt, wenn Sie "grüne" Taste drücken, wird die Farbe plötzlich eingestellt, aber wenn Sie "gelb" drücken, wenn es grün ist, können Sie die Animation sehen. Wenn Sie andererseits im Bereich "Mit Farben" die grüne Taste drücken, sehen Sie die Animation, und wenn Sie "gelb" drücken, sehen Sie die nächste Animation (wie "Mit Bildern"). Wenn Sie zum Beispiel erneut "grün" drücken und vor Beendigung der Animation erneut "gelb" drücken, wird im Abschnitt "Mit Bildern" die gelbe bis grüne Animation gestoppt und gelbe Farbe eingestellt, aber in "Mit Farben" die Animation gelb bis grün ist "modifiziert", um in gelb zu beenden – vgc