Snow Falling Animation Using Only CSS

Preview:

Description:

Yet another snow falling animation written entirely in CSS/CSS3. No image, canvas, and 3rd-party libraries required.

How to use it:

1. Add as many snowflakes to the webpage.

<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
...

2. Style the snowflakes.

.snow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
}

3. Apply falling animations to the snowflakes.

.snow:nth-child(1) {
  opacity: 0.6064;
  transform: translate(56.5936vw, -10px) scale(0.1606);
  animation: fall-1 22s -16s linear infinite;
}
@keyframes fall-1 {
  34.585% {
    transform: translate(57.9903vw, 34.585vh) scale(0.1606);
  }
  to {
    transform: translate(57.29195vw, 100vh) scale(0.1606);
  }
}
.snow:nth-child(2) {
  opacity: 0.0623;
  transform: translate(38.6106vw, -10px) scale(0.3982);
  animation: fall-2 17s -21s linear infinite;
}
@keyframes fall-2 {
  70.443% {
    transform: translate(37.0175vw, 70.443vh) scale(0.3982);
  }
  to {
    transform: translate(37.81405vw, 100vh) scale(0.3982);
  }
}
.snow:nth-child(3) {
  opacity: 0.7242;
  transform: translate(18.1453vw, -10px) scale(0.9984);
  animation: fall-3 10s -24s linear infinite;
}
@keyframes fall-3 {
  71.78% {
    transform: translate(22.1161vw, 71.78vh) scale(0.9984);
  }
  to {
    transform: translate(20.1307vw, 100vh) scale(0.9984);
  }
}
...