1
まず、JQueryを使用して背景画像を設定します。次に、内部にアニメーション機能を持つクラス「gridbouncer」を追加します。私のcss3アニメーションはJQueryではどうして動かないのですか？
$(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;
}
ダム質問：現在どのブラウザやレンダラーが '@keyframes'をサポートしていますか？速いGoogleはそれがWebkitだけであることを示し、それから '@ -webkit-keyframes'として示す。また、動的に適用されるスタイルでは機能しない場合、私は驚くことはありません。バックグラウンドとクラスをHTMLで直接設定すると動作しますか？ – RoToRa
jQueryを使ってアニメーション全体をやってみませんか？ – Kyle
JQueryはハードウェアを使用しないため、スローです。 – TIMEX