[英]How come my css3 animations don't work in JQuery?
首先,我使用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;
}
您需要在所有这些动画设置上使用-webkit前缀(并且在支持动画的浏览器中需要-moz和-o。)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.