CSSアニメーションを使用して背景のシームレスな無限ループを実装する例

<div class="犬"></div>

。犬 {
    幅: 5.4rem; \\画像の幅 高さ: 3.04rem; \\画像の高さ 背景画像: url(head.jpg);
    background-size: 5.4rem 3.04rem; \\画像の幅と高さ background-position: -5.4rem 0;
    アニメーション: 2 秒間の線形無限実行。
}

@keyframes 実行 {
    {背景位置: -5.4rem 0;} から
    {background-position: 0 0;} へ
}

$(ドキュメント).ready(関数(){
  サイズを戻す();
  setTimeout(関数() {
    $('.dog').css('アニメーション', '2秒間線形無限に実行');
  }, 0);
});