0
Я пытаюсь выполнить анимацию фонового изображения, изменяя класс 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>
На самом деле не рекомендуется анимировать (переход в вашем случае) фоновое изображение из одного источника в другой. Фоновое изображение не является анимирующим или переходным свойством в соответствии со спецификацией 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