How come my css3 animations don't work in JQuery?

First, I use JQuery to set the background image. Then, I add the class "gridbouncer", which has animation functions inside.

$(function(){
$(".grid_doc_holder").each(function(e){
      imageurl = $(this).attr("data-image");
      $(this).css('background', 'url(' + imageurl + ') no-repeat 50% 50% #000');
      $(this).addClass("gridbouncer");
       });
});

This is my CSS:

@keyframes bounce-background {
    from {
        background-position: top;
    }
    50% {
        background-position: bottom;
    }
开发者_高级运维    to {
        background-position: top;
    }
}
.gridbouncer {
    animation-name: bounce-background;
    animation-timing-function: ease-in-out;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

You need -webkit prefixes on all these animation settings (and will need a -moz and -o in those browsers when they support animations.)