CSSアニメーションと背景画像で空に雲を流す

実現したいこと

• 上図のような雲が浮かぶ空を作りたい。
• 雲はアニメーションで流れてほしい。
• 空の色はCSSで変えたい。

実装方法

以下のような雲の画像を用意します。（黒は透過チャンネルです。）

スタイルシートを作成します。

/* 1. 雲が浮かぶ空を作成 */
.sky {
  animation: cloud 25s linear infinite;
  background: url(../images/cloud.png),
    linear-gradient(#bbe4fa, hsl(171, 40%, 91%));
  background-position-x: 0%;
  background-position-y: 35%;
  background-repeat: repeat-x;
  background-size: 800px auto;
  height: 560px;
}
/* 2. keyframeを使って、雲が流れるように。 */
@keyframes cloud {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: 800px;
  }
}

1. 画像とグラデーションを背景に敷いて雲が浮かぶ空を作成。
2. 雲の背景画像をアニメーションで横に移動させる。

linear-gradientの色を変更すれば、夕方の空とかも作成できます。

簡単なので、みなさんぜひやってみてください。