具有关键帧和背景大小属性的CSS3动画在Chrome 51中不起作用

Question

我有一段类似于本例的代码。基本上有一些keyFrame(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中的背景大小转换问题有关-是错误还是功能？，使用prefix属性似乎可以工作，但没有它也不行，这根本没有意义。

这个版本可以工作，但是我被迫将前缀-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>