CSSを使って雪を降らせる方法

CSSだけを使って雪を降らせる方法を紹介します。jQueryなどは一切使うことなく、CSS3のアニメーションと＠keyframesの機能を利用するだけで簡単に雪を降らせることができます。

画像の用意

まずは、雪の結晶を用意しましょう。PhotoshopやIllustratorなどの画像作成ツールで作っても良いですし、面倒ならフリー素材を使っても良いでしょう。

HTMLとCSSの作成

ここからは、HTMLとCSSを使って作っていきます。HTMLは単純にdivタグで囲っているだけです。降らせたい数だけボックスを用意してください。

<div class="snow-fall">
  <div class="snow-1"></div>
  <div class="snow-2"></div>
  <div class="snow-3"></div>
  ～中略～
  <div class="snow-9"></div>
  <div class="snow-10"></div>
</div>

次にCSSを作っていきます。まずはアニメーションの部分です。

.snow-fall div {
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  background: url(snow.png) no-repeat;
  opacity: 0;
  transform-origin: 0 0;
  animation-name: snowfall;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.snow-1 {
  left: 20px;
  animation-duration: 2.5s;
  animation-delay: 0.4s;
}
.snow-2 {
  left: 80px;
  animation-duration: 2.7s;
  animation-delay: 0.2s;
}
～中略～
.snow-10 {
  left: 1280px;
  animation-duration: 3s;
  animation-delay: 1.4s;
}

雪の結晶を表示させるボックスに背景画像として読み込ませます。
transform-originプロパティは、画像の回転や移動、変形などをさせる際の原点を指定するものです。
animation-nameプロパティは、アニメーションを実行させるためのキーフレーム名を指定します。
animation-iteration-countプロパティは、アニメーションを何回繰り返すか指定します。ここでは、「infinite」という値を指定してウインドウを閉じるまで再生を繰り返す指定にしています。
animation-timing-functionプロパティは、アニメーションの再生パターンを指定するものです。ここでは「linear」という値を指定していますが、これは最初から最後まで一定の速度で変化します。
animation-fill-modeプロパティは、アニメーション開始を遅延させている間の表示や再生後の表示をどのようにするか指定するものです。ここでは、「forwards」という値で再生後は＠keyframesの100％表示のままにしています。
あとは、それぞれの雪の表示場所と動きの指定です。leftプロパティでそれぞれの位置を指定し、animation-durationプロパティで再生時間の設定、animation-delayプロパティで再生開始をそれぞれ遅らせています。

次に＠keyframesを使って変化するタイミングを設定していきます。

@keyframes snowfall {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  70% {
    transform: translateY(480px);
    opacity: 1;
  }
  100% {
    transform: translateY(780px);
    opacity: 0.3;
  }
}

まずは、animation-nameプロパティで指定したキーフレーム名を代入します。そして、再生時間中、どの時点でどういった動きをさせるのかパーセントで指定します。その際、0％（開始）と100％（終了）は必須で指定しなければなりません。その間にはいくつ区切っても構いません。ちなみに0％は「from」、100％は「to」と記述することも可能です。
あとは、transformプロパティで「translateY」という値を使って下方向へ移動させるように設定すれば雪が降っているようなアニメーションが完成します。

以上が、CSSを使って雪を降らせる方法となります。