expexp.jp

CSS

【CSS】繰り返す背景を動かしたい

CSSで繰り返す背景を動かすサンプルです。

サンプルデモ

HTML

<section class="repeat-bg-anime"></section>

SASS

/*---------------------------------------------
  Repeat background animation
  ---------------------------------------------*/
.repeat-bg-anime {
  width: 100%;
  height: 240px;
  background: url(../img/repeat-bg.png) repeat-x;
  animation: repeatBgAni 1.5s linear 0s infinite normal;
  @keyframes repeatBgAni {
    0% { background-position: 0; }
    100% { background-position: 320px; }
  }
}