为什么我的css3动画在JQuery中不起作用?

时间:2010-12-08 08:49:45

标签: javascript jquery html css css3

首先,我使用JQuery设置背景图像。然后,我添加了类“gridbouncer”,其中包含动画功能。

$(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");
       });
});

这是我的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;
}

1 个答案:

答案 0 :(得分:1)

在所有这些动画设置上都需要-webkit前缀(当这些动画设置支持动画时,需要-moz和-o。)