最近は動きのあるサイトが主流になってきています。今回はCSS animation と@keyframeで実装するCSSで流れる背景のやり方のご紹介（備忘録）です。

早速コードと動き方をご覧ください。

See the Pen 流れる背景 by kotty (@kottty) on CodePen.

解説

① 繰り返し用の背景を用意

今回は500pxの正方形を用意して背景のサイズを半分の250pxのサイズにCSSで指定しています。

② 繰り返しのanimationを設定する

@keyframeで指定する名前を指定、
速さ（秒数）、
動き方（アニメーションに対応するイージング関数）を等しい速度で動くlinear、
最後に無限に繰り返すinfiniteを指定します。

animation: animation 30s linear infinite;

③ @keyframeで背景の位置を動かす

背景の位置をボックスの左上を起点にして、水平方向の位置、垂直方向の位置の値を指定します。

今回だと右に250px、上に250px（マイナス値で指定）を設定しています。

@keyframes animation {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 250px -250px;
  }
}

背景画像の繰り返しに関しては、アニメーションの移動距離を、画像サイズの整数倍になるよう調整してください。
例えば、今回背景画像を250pxの正方形で設定していますので、background-positionの変化を250px単位で設定すると、画像が綺麗に繰り返します。
しかしこの数値が画像サイズの倍数になっていない場合、アニメーションのループがうまく繋がらずガタッとする可能性があります。

まとめ

CSSで背景を動かす方法をご紹介しました。

ただ過度な動きは不快感を与えることになったりアクセシビリティ的には配慮が必要です。
すべてのユーザーが快適にWebサイトを使うために適材適所で使っていきましょう。