[英]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.