具有关键帧和背景大小属性的CSS3动画在Chrome 51中无效

Question

我有一段类似于本例中的代码.基本上有一些keyFrames(0%和100%)将background-size属性设置为100%,而keyFrame 50%将该属性设置为50%.

@keyframes imagebulger {
  0%,
  100% {
    background-size: 100% auto;
  }
  50% {
    background-size: 50% auto;
  }
}

div.hotspot {
  width: 200px;
  height: 100px;
  background-image: url("http://dummyimage.com/200x100/000/fff");
  background-repeat: no-repeat;
  animation: imagebulger 2s infinite !important;
}

<div class="hotspot"></div>

该示例在Chrome <51,Firefox,IE 11等中按预期工作(执行转换).但是,在Chrome更新(51.0.2704.63)之后,它不再起作用了.我在Windows计算机和Linux计算机上尝试过相同的结果.

有这个问题的人找到了解决方法吗？否则我会直接发布Chrome错误

与问题相关的问题Chrome 51中的背景大小转换 - 错误或功能？,似乎它使用前缀属性,但没有它,这根本没有意义.

这个版本可以使用,但是我被迫将前缀-webkit-设置为普通的关键帧,这可能会使这个动画在其他浏览器中不起作用.我不认为这是一个公认的解决方案.

Answer 1

解决方法

background-size使用后跟的两个标准-webkit-background-size，解决了问题（示例）。

div.hotspot {
  width: 200px;
  height: 100px;
  background-image: url("http://dummyimage.com/200x100/000/fff");
  background-repeat: no-repeat;
  animation: imagebulger 2s infinite;
}
@keyframes imagebulger {
  0%, 100% {
    background-size: 100% auto;
    -webkit-background-size: 100%;
  }
  50% {
    background-size: 50% auto;
    -webkit-background-size: 50%;
  }
}

<div class="hotspot"></div>