Animations in Chrome 34 - css

Question

I used a snippet from here a while back to create a infinitely scrolling element https://css-tricks.com/infinite-all-css-scrolling-slideshow/
The active code I'm using on my website looks like:
.wave_bg {
background: url("../img/wave_bg.jpg") no-repeat;
-webkit-animation: slide 10s linear infinite;
-moz-animation: slide 10s linear infinite;
-ms-animation: slide 10s linear infinite;
animation: slide 10s linear infinite;
}
#-webkit-keyframes slide {
from {
background-position: 0 0;
}
to {
background-position: 100% 0;
}
}
#-moz-keyframes slide {
from {
background: left;
}
to {
background: right;
}
}
#-ms-keyframes slide {
from {
background: left;
}
to {
background: right;
}
}
#keyframes slide {
from {
background: left;
}
to {
background: right;
}
}
However in Chrome 34 this suddenly stopped working (it worked in Chrome 33 and earlier) - the background image just doesn't appear at all (it works in FF 33.1, FF 35.0.1, FF 38.0.5 and IE 10 still). If I disable the animation (and deprecated -webkit-animation) in dev tools then the background image shows again - so I'm assuming the issue is related to the CSS animation.
I can't find (at a quick search around) any documentation on things changing in Chrome 34 with regards to animations - so I was wondering if anyone had experienced this bug and had some sort of workaround for it?

Answer 1

I haven't looked at your code.. but... as Chrome drops more and more prefixes, some of your animations may not work if for example your only using -webkit prefixes in you -webkit-animation: infinite....
Make sure you use both prefixed and unprefixed syntax within your delcared animations basically. See below...
You need this...
#-webkit-keyframes infnite {
0% { -webkit-transform: scale(1); transform: scale(1);}
100% { -webkit-transform: scale(2); transform: scale(1);}
}
and this...
#keyframes infnite {
0% { -webkit-transform: scale(1); transform: scale(1);}
100% { -webkit-transform: scale(2); transform: scale(1);}
}
In the above example... if Chrome dropped support for transform prefix but not for keyframes then unless u have both the prefix and unprefix your animation will stop working "suddenly".