首先,我使用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;
}
答案 0 :(得分:1)
在所有这些动画设置上都需要-webkit前缀(当这些动画设置支持动画时,需要-moz和-o。)