animationプロパティで背景アニメーションを実装する

ウェブデザインに於いて動画を背景に流すことが、ひと昔前から可能になった。重いのが今日に於いてもデメリットだ。

その代替え案になるかもしれない背景画像をアニメーションさせる手法をまとめる。

ひとつ、コンテンツの領域の背景画像をアニメーションさせる方法。

高解像度の画像を用意する
背景に使う画像はコンテンツの高さに合わせて伸縮するようにCSS(background-size: auto 100%;)を組むので、画像の構図は縦方向を注視する
画像の切れ目についてはCSS(to { background-position: 100% 0; } )で実行すればさほど気にならない
凝りたい諸君は背景で使う画像の左端と右端のテイストを融合させると更に良い

						
<body>
<div class="bg-image-loop">
<!-- コンテンツがここに入る -->
</div>
</body>


/* css */
.bg-image-loop {
	width: 100%;
	height: auto; /* コンテンツに応じて高さを変える */
	position: relative;
	background: url("images/gradation.jpg") repeat-x 0 0;
	background-size: auto 100%;
	animation: bg-slider 100s linear infinite; 
	margin-top: -8px;
	padding: 0;
	box-shadow: 0 0px 50px rgba(47, 63, 135, 0.4);
  	filter: drop-shadow(1px 1px 1px rgba(47, 63, 135, 0.4));
	}
@keyframes bg-slider {
	from { background-position: 0 0; }
  	to { background-position: 100% 0; } 
	}

ふたつ、<body>タグにグラデーションのアニメーションを実行する。ふたつのアニメーションが交差するとウェブデザインの見応えが断然に増す。

参考：CSS GRADIENT ANIMATOR

						
  body {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 40%;
    font-family: 'Noto Sans JP', sans-serif;
    background-image: linear-gradient(to right, #fff98f 0%, #47cf8d 50%, #fff98f 100%);
    background-size: 200% auto;
    animation: grdAnime 10s infinite linear;
  }

  @-webkit-keyframes grdAnime {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

  @keyframes grdAnime {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 200% 0;
    }
  }