（自分用めも）背景画像の無限スクロールをCSSアニメーションでつくる

この手の話題はいろいろなところで既出だとは思いますが、自分用にメモをば。

CSSアニメーションをつかって背景画像の無限スクロールをする方法です。画像の横スクロールをしたくなったのですが、以下のようにしてみました。

CSSアニメーションのキーフレームに background-position （背景画像のオフセット量）を設定して、背景画像を3秒で画像1枚分だけ横スクロールさせます。

.toppage-header__bg {
    width: 100%;
    height: 1000px;
    background-image: url('images/top_bg.png');
    animation-name: scroll-header-bg;
    animation-duration: 3s;                  /*3秒で画像1枚分スクロールする*/
    animation-timing-function: linear;       /*再生速度を一定にする*/
    animation-iteration-count: infinite;     /*アニメーションの無限再生*/
}

@keyframes scroll-header-bg {
    0% {
        background-position: 0 0;            /*初期値を設定する*/
    }

    100% {
        background-position: -2464px 0;      /*画像サイズに合わせて変更する（負号で左スクロール）*/
    }
}

CSSアニメーションとかトランジションとか、毎度プロパティ名とか忘れちゃうのですよね。というわけでメモしてみたのでした。 ただいまみんなでつくるダンジョンの紹介ページを作っているのですが、CSSアニメーションをちょいちょいと使ってみようと思っています。アニメーションを入れるのは楽しいなぁ。

ではでは。