そこで私は最近、CSS3 の非常にエキサイティングなアニメーション機能を発見し、Web サイトの背景にアニメーションを適用しました。
私の問題は、読み込み時にブラウザ ウィンドウ内に表示されるページの部分にのみアニメーションが適用されることです。上記のリンクにアクセスして下にスクロールすると、ウェブサイトの上部にある背景画像がアニメーション化されていることがわかりますが、ページを下にスクロールするとアニメーション化されません...
背景アニメーションがページ全体に適用されるように、これを回避する方法を知っている人はいますか?
私のCSSコードの関連部分は次のとおりです。
body
{
background-image:url('images/patterntest2.jpg');
background-repeat:repeat;
-webkit-animation:bgscroll 20s infinite linear;
-moz-animation:bgscroll 20s infinite linear;
-ms-animation:bgscroll 20s infinite linear;
-o-animation:bgscroll 20s infinite linear;
animation:bgscroll 20s infinite linear;
}
/*////////////////////////////////////////////////
--------------------------------------------------
* Animations
--------------------------------------------------
////////////////////////////////////////////////*/
@-webkit-keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}
@-moz-keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}
@-ms-keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}
@-o-keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}
@keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}