3

私は最近いくつかの css3 を試しています。私がやろうとしているのは、背景画像を左にスライドさせてシームレスに繰り返し、無限の背景アニメーションの効果を与えることです (古い漫画で背景を何度もループさせるようなものです...)。このcss3で私が直面している問題は、アニメーションが完了すると、アニメーションが開始位置に戻ることです。ここを参照してください:私のブログ. アニメーションが完了すると、「super sluggy」というタイトルのエントリの背景が所定の位置に戻ります。私は w3schools で答えを探し、グーグルや関連するスタックの質問も調べましたが、どこにも解決策が見つかりません。これが私のコードです：

@keyframes l_2_r
{
from {background-position: top left;}
to {background-position: top right;}
}

@-moz-keyframes l_2_r
{
from {background-position: top left;}
to {background-position: top right;}
}

@-webkit-keyframes l_2_r
{
from {background-position: top left;}
to {background-position: top right;}
}

@-o-keyframes l_2_r
{
from {background-position: top left;}
to {background-position: top right;}
}

#sluggy_div{
background: url('../imgs/sluggy-bg.jpg') repeat-x;
animation: l_2_r 7s linear infinite;
-moz-animation: l_2_r 7s linear infinite;
-webkit-animation: l_2_r 7s linear infinite;
-o-animation: l_2_r 7s linear infinite;
}

x 軸に沿って繰り返される場合、背景自体はシームレスですが、アニメーション化された場合、トランジションはすばやくスナップされ、シームレスにするか、ユーザーに気付かれないようにする必要があります。

これを修正する方法を知っている人はいますか？ありがとう！

4

1 に答える 1

3

私が思いついた最も簡単な解決策は、 からbackground-positionのx方向0に、効果的にその幅の負の位置 (この場合は-1000px) にアニメーション化することです。

@-webkit-keyframes l_2_r {
    from {background-position: 0 0;}
    to {background-position: -1000px 0;}
}

#sluggy {
    width: 560px;
    height: 374px;
    border: 1px solid #f90; /* just for visibility */
    background-image: url(http://digitalbrent.com/imgs/sluggy-bg.jpg);
    -webkit-animation: l_2_r 7s linear infinite;
}​

JS Fiddle (Webkit-vendor-prefix のみ) demo .

そして、これはChromium 18ではうまくいくようです。デモで実際の画像を使用しても問題ないことを願っていますが、テストに適した画像がありませんでした。

于 2012-08-12T23:40:30.623 に答える