背景画像を横にスクロールさせたい CSS animation<レスポンシブ/要素に対して全画面>

一部の要素で背景画像を全幅でループさせたい場合のスタイルシート。

<div class=”bg-image-loop”>~</div> や <section id=”bg-image-loop”>~</section>

※「bg-image-loop」、「bgscroll」は任意。

.bg-image-loop {
    position: relative;
    background-image: url(背景画像);
    background-repeat: repeat-x;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    -webkit-animation: bgscroll 120s linear infinite;
    animation: bgscroll 120s linear infinite;
}

@-webkit-keyframes bgscroll { 0% {background-position: 0 0;} 100% {background-position: -2000px 0;}}/* 2000px使用した背景画像の横幅 */
@keyframes bgscroll { 0% {background-position: 0 0;} 100% {background-position: -2000px 0 ;}}

 

@keyframes bgscroll の指定が無いと動きません。

コメント

タイトルとURLをコピーしました