cssだけで永遠に画像をリピートさせる（cssアニメーションで画像をリピート）

最近のwebサイトって何かしら動きがついていますよね。

動きをつけるってことはjavascript勉強しなきゃってこと？？

と思うかもしれませんが

cssだけでも、いろんなアニメーションが作れます。

ちょっと前に作ったサイトで

画像を永遠にリピートさせるというcssを使ったので

それを紹介します。

結構無理やり系です。

今回はこの画像をリピートさせてみます。

cssだけで永遠に画像をリピートさせる

リピートするよ

とりあえずこんな感じで動きます。

結構使えそうですよね！！

コードはこんな感じです。

cssだけで永遠に画像をリピート HTML

cssだけで永遠に画像をリピート css

.repeat_css {
    background: url(読み込み画像のURL)repeat-x center center;
    animation: moveBg 1000s infinite linear;
    Padding:100px 0;
    text-align: center;
}
.repeat_css span{
    color: #fff;
    background:#f00;
    Padding:5px 10px;
}
@keyframes moveBg {
    0% {
        background-position: 0;
    }
    100% {
        background-position: 50000px;
    }
}

cssだけで永遠に画像をリピートポイント解説

1、 backgroundのrepeat-x

背景画像の読み込みをこのように記述。

background: url(読み込み画像のURL)repeat-x center center;

repeat-xすることにより、ひたすら画像がx方向にリピートされます。

２、cssのアニメーション

animation: moveBg 1000s infinite linear;

1000sの箇所で1000秒間のアニメーションとします。

1000sでなくても大きい数字ならなんでも大丈夫です。ひたすらリピートさせたいので

1000sにしておきました。

1000sということは、16分ぐらいリピートが続きます。

infiniteで1000sのアニメーションを繰り返します。

1000秒経つとアニメーションが初めに戻るので

1000秒に1回ちょっと繰り返しが雑になる瞬間があります。

@keyframes moveBg {
    0% {
        background-position: 0;
    }
    100% {
        background-position: 50000px;
    }
}

この箇所でアニメーションの定義をしています。

1000秒で50000px動く。という作りです。

スピードを調整したい場合は

animation: moveBg 1000s infinite linear;

の1000sの部分の数字を調整するか

100% {
    background-position: 50000px;
}

の部分のpxを調整するか。で調整できます。

よろしければ使って見てください。