Animations in Chrome 34

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".