雨の日なので CSS だけで雨のアニメーションを実装する

定番ですが雨の日の気晴らしに。
JavaScript は使わずに CSS （ SCSS ）だけで雨が降るアニメーションを実装してみました。

See the Pen SCSS Rain (No JS) by mimonelu (@mimonelu) on CodePen.

コード（ SCSS ）

.rain {

  $rain_drop_height: 20vh;

  background-color: #102030;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  & > div {
    animation: rain 500ms linear infinite;
    background-color: rgba(#ffffff, 0.25);
    position: absolute;
    left: 0;
    top: -$rain_drop_height;
    width: 1px;
    height: $rain_drop_height;
    transform-origin: center center;
  }
  @for $i from 1 through 25 {
    & > div:nth-child(#{$i}) {
      animation-delay: #{$i * 100}ms;
      animation-duration: random(250) + 375ms;
      left: random(100) + vw;
    }
  }

  @keyframes rain {
    from {
      transform: rotate(-5deg) translateY(-$rain_drop_height);
    }
    to {
      transform: rotate(-5deg) translateY(100vh + $rain_drop_height);
    }
  }

}

ミソ

乱数どうするの問題

雨粒の x 座標やアニメーションの再生時間などはランダムな値にしたいところですが、 CSS に乱数を生成する仕様はないため、 SCSS の random() 関数で生成しています。つまり、コンパイルした時に乱数が定数として埋め込まれるだけなので、何度リロードしても同じアニメーションが再生されますが、そこは妥協しました。だって他に方法ないし(´・ω・｀)

transform の順番

雨粒を斜めに降らせるにはどうすれば良いでしょう？ここでは transform: rotate(...) translateY(...); とすることで、雨粒が「回転した方向へ移動」するようにしました。これを入れ替えると「角度は無視して移動」することになり、要するに行列計算の順番を制御することで、あ、ご存知で？あ、はい。

おわりに

紙吹雪が瞬きながら舞うアニメーションなんかも実装できますが、無茶せずに JavaScript を、できれば Canvas も使って実装した方が良いでしょうね。