【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; }
  }
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

*

関連記事