cssだけで背景画像を右から左へループさせる　

24.09.20

htmlの入力例

contentが中身です。こちらは必要に応じて適宜整えてください。

<div class="jp_slide_img_wrapper">
    <div class="content">
        <h2 class="h2_title">中身です。</h2>
    </div>
</div>

</div>

cssの入力

大枠のclass（jp_slide_img_wrapper）に以下のコードを入れると作動します。それとは別に@keyframesのコードが必要なので
最終的には「外枠背景のコード」と「@keyframesのコード」の2つがあれば作動します。

「外枠背景」と「@keyframes」のcss

.jp_slide_img_wrapper {
    position: relative;
    width: 100%;
    background-image: url("images/bg-cover.png");
    background-repeat: repeat-x;
    background-size: cover;
    background-position: 0 0;
    animation-name: slide_img;
    animation-duration: 200s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}

@keyframes slide_img {
    100% {
        background-position: -10000px 0;
        }
}