自動で無限ループする背景

css3で自動で動く背景を作ります。

HTML

<div class="effect_contents">
</div>

CSS

.effect_contents{
    width: 100%;
    max-width: 640px;
    height: 400px;
    margin: 0 auto;
    background: url(../img/demo/161115bg_01.jpg) ;
    background-position: center;
    /*画像のサイズを指定する*/
    -webkit-background-size: 256px 256px;
     background-size:  256px 256px;
     /* animation:アニメーション名 , アニメーションの時間 , アニメーションのタイミング , アニメーションの繰り返し */
     -webkit-animation: bgscroll 20s linear infinite;
     animation: bgscroll 20s linear infinite;

}
/*アニメーションの指定
background-position: x軸 , y軸;
今回は縦にスクロールする
背景画像のサイズ分移動させる
*/
@-webkit-keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: 0 256px;}
}

@keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: 0 256px;}
}

 
animation: bgscroll 10s linear infinite;でアニメーションを設定しています。
1回のアニメーションが20s(20秒)でイージングなしで一定、無限に繰り返します。
今回は縦スクロールですが、横スクロールも可能です。
 
デモページ
 

  • コーダーのための計算機