问CSS3背景(URL图像)在其他动画运行时生成动画
EN

Stack Overflow用户

提问于 2017-02-23 00:08:49

回答 1查看 44关注 0票数 0

我正在尝试执行更改div类的背景图像的动画。动画一开始看起来还不错，当我改变类的时候，动画就完美地完成了。然而，当我在动画运行时再次更改类时，它立即停止，并设置了最后一个类(没有动画)。

我对颜色而不是图像做了同样的处理，当我在动画运行时更改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>

animation

css

回答 1

Stack Overflow用户

发布于 2017-02-23 16:51:43

我在安卓默认、iOS safari和Windows Chrome浏览器上进行了测试，它有相同的行为(动画已经完成，但不是在另一个浏览器运行的时候)，但在I浏览器中什么也不做。

就像@Harry所说的，"background-image“属性一开始不支持css动画，它可以在一些浏览器中工作，但它不是一个标准，所以我必须找到一个替代方案。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42396636

复制

相似问题

问CSS3背景(URL图像)在其他动画运行时生成动画
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3背景(URL图像)在其他动画运行时生成动画EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3背景(URL图像)在其他动画运行时生成动画
EN