CSS3 animation with keyframes and background-size property not working in Chrome 51

Question

I had a piece of code similar to the one in this example. There are basically some keyFrames (0% and 100%) which sets the background-size property to 100%, while the keyFrame 50% sets that property to 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>

That example worked as expected (performing the transition) in Chrome < 51, Firefox, IE 11 and so on. However, after the Chrome update (51.0.2704.63) it does not work anymore. I tried in Windows computer and in Linux computer and same result.

Somebody with that issue found a workaround? Otherwise I will post directly as a Chrome bug

Related with the issue Background-size transitions in Chrome 51 - a bug or a feature?, seems like it works using the prefix property but not without it, which does not makes sense at all.

This version will work, however I was forced to set the prefix -webkit- to the normal keyframes which probably will make this animation not work in some other browsers. I don't think that is an accepted solution.

Answer 1

Workaround

Using both the standard background-size followed by -webkit-background-size, solves the problem (example).

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>