비전공자 개발일기

Snow Animation 본문

HTML _CSS

Snow Animation

HiroDaegu 2022. 6. 2. 01:17
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SNOW ANIMATION</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
  <div class="snow"></div>  
</body>
</html>

https://www.sassmeister.com/

 

SassMeister | The Sass Playground!

SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading...

www.sassmeister.com

body {  
  height: 100vh;  
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);  
  overflow: hidden;  
  filter: drop-shadow(0 0 10px white);  
 }  
 @function random_range($min, $max) {  
  $rand: random();  
  $random_range: $min + floor($rand * (($max - $min) + 1));  
  @return $random_range;  
 }  
 .snow {  
  $total: 200;  
  position: absolute;  
  width: 10px;  
  height: 10px;  
  background: white;  
  border-radius: 50%;  
  @for $i from 1 through $total {  
   $random-x: random(1000000) * 0.0001vw;  
   $random-offset: random_range(-100000, 100000) * 0.0001vw;  
   $random-x-end: $random-x + $random-offset;  
   $random-x-end-yoyo: $random-x + ($random-offset / 2);  
   $random-yoyo-time: random_range(30000, 80000) / 100000;  
   $random-yoyo-y: $random-yoyo-time * 100vh;  
   $random-scale: random(10000) * 0.0001;  
   $fall-duration: random_range(10, 30) * 1s;  
   $fall-delay: random(30) * -1s;  
   &:nth-child(#{$i}) {  
    opacity: random(10000) * 0.0001;  
    transform: translate($random-x, -10px) scale($random-scale);  
    animation: fall-#{$i} $fall-duration $fall-delay linear infinite;  
   }  
   @keyframes fall-#{$i} {  
    #{percentage($random-yoyo-time)} {  
     transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);  
    }  
    to {  
     transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);  
    }  
   }  
  }  
 }
body {
  height: 100vh;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
  filter: drop-shadow(0 0 10px white);
}

.snow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
}
.snow:nth-child(1) {
  opacity: 0.9868;
  transform: translate(90.5858vw, -10px) scale(0.6125);
  animation: fall-1 13s -17s linear infinite;
}
@keyframes fall-1 {
  40.398% {
    transform: translate(91.7872vw, 40.398vh) scale(0.6125);
  }
  to {
    transform: translate(91.1865vw, 100vh) scale(0.6125);
  }
}
.snow:nth-child(2) {
  opacity: 0.1878;
  transform: translate(5.1331vw, -10px) scale(0.2229);
  animation: fall-2 30s -16s linear infinite;
}
@keyframes fall-2 {
  32.954% {
    transform: translate(-4.8258vw, 32.954vh) scale(0.2229);
  }
  to {
    transform: translate(0.15365vw, 100vh) scale(0.2229);
  }
}
.snow:nth-child(3) {
  opacity: 0.7974;
  transform: translate(31.7104vw, -10px) scale(0.8286);
  animation: fall-3 26s -21s linear infinite;
}
@keyframes fall-3 {
  38.893% {
    transform: translate(27.7571vw, 38.893vh) scale(0.8286);
  }
  to {
    transform: translate(29.73375vw, 100vh) scale(0.8286);
  }
}
.snow:nth-child(4) {
  opacity: 0.3572;
  transform: translate(73.3453vw, -10px) scale(0.2857);
  animation: fall-4 28s -10s linear infinite;
}
@keyframes fall-4 {
  38.471% {
    transform: translate(79.5489vw, 38.471vh) scale(0.2857);
  }
  to {
    transform: translate(76.4471vw, 100vh) scale(0.2857);
  }
}
.snow:nth-child(5) {
  opacity: 0.2537;
  transform: translate(78.6942vw, -10px) scale(0.0422);
  animation: fall-5 15s -1s linear infinite;
}
@keyframes fall-5 {
  66.241% {
    transform: translate(82.0665vw, 66.241vh) scale(0.0422);
  }
  to {
    transform: translate(80.38035vw, 100vh) scale(0.0422);
  }
}
.snow:nth-child(6) {
  opacity: 0.4459;
  transform: translate(4.405vw, -10px) scale(0.9011);
  animation: fall-6 28s -23s linear infinite;
}
@keyframes fall-6 {
  49.083% {
    transform: translate(13.1857vw, 49.083vh) scale(0.9011);
  }
  to {
    transform: translate(8.79535vw, 100vh) scale(0.9011);
  }
}
.snow:nth-child(7) {
  opacity: 0.3667;
  transform: translate(74.7082vw, -10px) scale(0.5374);
  animation: fall-7 16s -8s linear infinite;
}
@keyframes fall-7 {
  52.841% {
    transform: translate(81.1253vw, 52.841vh) scale(0.5374);
  }
  to {
    transform: translate(77.91675vw, 100vh) scale(0.5374);
  }
}
.snow:nth-child(8) {
  opacity: 0.3907;
  transform: translate(27.5872vw, -10px) scale(0.535);
  animation: fall-8 28s -4s linear infinite;
}
@keyframes fall-8 {
  65.843% {
    transform: translate(34.2768vw, 65.843vh) scale(0.535);
  }
  to {
    transform: translate(30.932vw, 100vh) scale(0.535);
  }
}
.snow:nth-child(9) {
  opacity: 0.0798;
  transform: translate(83.9184vw, -10px) scale(0.927);
  animation: fall-9 16s -13s linear infinite;
}
@keyframes fall-9 {
  66.171% {
    transform: translate(92.1199vw, 66.171vh) scale(0.927);
  }
  to {
    transform: translate(88.01915vw, 100vh) scale(0.927);
  }
}
.snow:nth-child(10) {
  opacity: 0.773;
  transform: translate(18.0165vw, -10px) scale(0.6115);
  animation: fall-10 18s -15s linear infinite;
}
@keyframes fall-10 {
  79.401% {
    transform: translate(12.312vw, 79.401vh) scale(0.6115);
  }
  to {
    transform: translate(15.16425vw, 100vh) scale(0.6115);
  }
}
.snow:nth-child(11) {
  opacity: 0.1765;
  transform: translate(52.9826vw, -10px) scale(0.1211);
  animation: fall-11 29s -11s linear infinite;
}
@keyframes fall-11 {
  30.309% {
    transform: translate(48.669vw, 30.309vh) scale(0.1211);
  }
  to {
    transform: translate(50.8258vw, 100vh) scale(0.1211);
  }
}
.snow:nth-child(12) {
  opacity: 0.7663;
  transform: translate(84.0564vw, -10px) scale(0.1013);
  animation: fall-12 10s -19s linear infinite;
}
@keyframes fall-12 {
  41.896% {
    transform: translate(89.8839vw, 41.896vh) scale(0.1013);
  }
  to {
    transform: translate(86.97015vw, 100vh) scale(0.1013);
  }
}
.snow:nth-child(13) {
  opacity: 0.7365;
  transform: translate(84.9298vw, -10px) scale(0.2263);
  animation: fall-13 25s -7s linear infinite;
}
@keyframes fall-13 {
  69.044% {
    transform: translate(90.3287vw, 69.044vh) scale(0.2263);
  }
  to {
    transform: translate(87.62925vw, 100vh) scale(0.2263);
  }
}
.snow:nth-child(14) {
  opacity: 0.7487;
  transform: translate(63.3344vw, -10px) scale(0.5059);
  animation: fall-14 20s -13s linear infinite;
}
@keyframes fall-14 {
  64.111% {
    transform: translate(56.0346vw, 64.111vh) scale(0.5059);
  }
  to {
    transform: translate(59.6845vw, 100vh) scale(0.5059);
  }
}
.snow:nth-child(15) {
  opacity: 0.0508;
  transform: translate(22.9211vw, -10px) scale(0.9933);
  animation: fall-15 14s -6s linear infinite;
}
@keyframes fall-15 {
  72.053% {
    transform: translate(24.0625vw, 72.053vh) scale(0.9933);
  }
  to {
    transform: translate(23.4918vw, 100vh) scale(0.9933);
  }
}
.snow:nth-child(16) {
  opacity: 0.0259;
  transform: translate(29.2053vw, -10px) scale(0.9744);
  animation: fall-16 30s -14s linear infinite;
}
@keyframes fall-16 {
  56.669% {
    transform: translate(25.6563vw, 56.669vh) scale(0.9744);
  }
  to {
    transform: translate(27.4308vw, 100vh) scale(0.9744);
  }
}
.snow:nth-child(17) {
  opacity: 0.509;
  transform: translate(59.8561vw, -10px) scale(0.2853);
  animation: fall-17 16s -17s linear infinite;
}
@keyframes fall-17 {
  75.834% {
    transform: translate(61.2618vw, 75.834vh) scale(0.2853);
  }
  to {
    transform: translate(60.55895vw, 100vh) scale(0.2853);
  }
}
.snow:nth-child(18) {
  opacity: 0.7574;
  transform: translate(17.0802vw, -10px) scale(0.0612);
  animation: fall-18 21s -30s linear infinite;
}
@keyframes fall-18 {
  39.476% {
    transform: translate(9.0002vw, 39.476vh) scale(0.0612);
  }
  to {
    transform: translate(13.0402vw, 100vh) scale(0.0612);
  }
}
.snow:nth-child(19) {
  opacity: 0.3682;
  transform: translate(87.7082vw, -10px) scale(0.8649);
  animation: fall-19 11s -23s linear infinite;
}
@keyframes fall-19 {
  74.619% {
    transform: translate(97.5554vw, 74.619vh) scale(0.8649);
  }
  to {
    transform: translate(92.6318vw, 100vh) scale(0.8649);
  }
}
.snow:nth-child(20) {
  opacity: 0.2356;
  transform: translate(62.817vw, -10px) scale(0.6514);
  animation: fall-20 24s -22s linear infinite;
}
@keyframes fall-20 {
  75.097% {
    transform: translate(72.7084vw, 75.097vh) scale(0.6514);
  }
  to {
    transform: translate(67.7627vw, 100vh) scale(0.6514);
  }
}
.snow:nth-child(21) {
  opacity: 0.7837;
  transform: translate(6.0875vw, -10px) scale(0.081);
  animation: fall-21 30s -18s linear infinite;
}
@keyframes fall-21 {
  55.029% {
    transform: translate(6.3386vw, 55.029vh) scale(0.081);
  }
  to {
    transform: translate(6.21305vw, 100vh) scale(0.081);
  }
}
.snow:nth-child(22) {
  opacity: 0.3685;
  transform: translate(2.473vw, -10px) scale(0.0783);
  animation: fall-22 20s -11s linear infinite;
}
@keyframes fall-22 {
  42.278% {
    transform: translate(-6.3059vw, 42.278vh) scale(0.0783);
  }
  to {
    transform: translate(-1.91645vw, 100vh) scale(0.0783);
  }
}
.snow:nth-child(23) {
  opacity: 0.6271;
  transform: translate(22.5541vw, -10px) scale(0.0188);
  animation: fall-23 12s -4s linear infinite;
}
@keyframes fall-23 {
  58.854% {
    transform: translate(18.0712vw, 58.854vh) scale(0.0188);
  }
  to {
    transform: translate(20.31265vw, 100vh) scale(0.0188);
  }
}
.snow:nth-child(24) {
  opacity: 0.5248;
  transform: translate(15.6924vw, -10px) scale(0.0166);
  animation: fall-24 20s -19s linear infinite;
}
@keyframes fall-24 {
  65.813% {
    transform: translate(23.0588vw, 65.813vh) scale(0.0166);
  }
  to {
    transform: translate(19.3756vw, 100vh) scale(0.0166);
  }
}
.snow:nth-child(25) {
  opacity: 0.789;
  transform: translate(83.0038vw, -10px) scale(0.0331);
  animation: fall-25 21s -28s linear infinite;
}
@keyframes fall-25 {
  71.275% {
    transform: translate(79.0921vw, 71.275vh) scale(0.0331);
  }
  to {
    transform: translate(81.04795vw, 100vh) scale(0.0331);
  }
}
.snow:nth-child(26) {
  opacity: 0.7833;
  transform: translate(99.3771vw, -10px) scale(0.1714);
  animation: fall-26 29s -12s linear infinite;
}
@keyframes fall-26 {
  64.264% {
    transform: translate(104.5668vw, 64.264vh) scale(0.1714);
  }
  to {
    transform: translate(101.97195vw, 100vh) scale(0.1714);
  }
}
.snow:nth-child(27) {
  opacity: 0.5221;
  transform: translate(69.5096vw, -10px) scale(0.9667);
  animation: fall-27 26s -7s linear infinite;
}
@keyframes fall-27 {
  57.303% {
    transform: translate(66.2997vw, 57.303vh) scale(0.9667);
  }
  to {
    transform: translate(67.90465vw, 100vh) scale(0.9667);
  }
}
.snow:nth-child(28) {
  opacity: 0.812;
  transform: translate(86.857vw, -10px) scale(0.3127);
  animation: fall-28 22s -28s linear infinite;
}
@keyframes fall-28 {
  79.458% {
    transform: translate(80.8337vw, 79.458vh) scale(0.3127);
  }
  to {
    transform: translate(83.84535vw, 100vh) scale(0.3127);
  }
}
.snow:nth-child(29) {
  opacity: 0.4028;
  transform: translate(44.5988vw, -10px) scale(0.7868);
  animation: fall-29 22s -16s linear infinite;
}
@keyframes fall-29 {
  55.806% {
    transform: translate(47.2812vw, 55.806vh) scale(0.7868);
  }
  to {
    transform: translate(45.94vw, 100vh) scale(0.7868);
  }
}
.snow:nth-child(30) {
  opacity: 0.3546;
  transform: translate(19.4002vw, -10px) scale(0.3317);
  animation: fall-30 10s -26s linear infinite;
}
@keyframes fall-30 {
  73.544% {
    transform: translate(21.4016vw, 73.544vh) scale(0.3317);
  }
  to {
    transform: translate(20.4009vw, 100vh) scale(0.3317);
  }
}
.snow:nth-child(31) {
  opacity: 0.8807;
  transform: translate(19.576vw, -10px) scale(0.1344);
  animation: fall-31 16s -4s linear infinite;
}
@keyframes fall-31 {
  72.779% {
    transform: translate(28.1389vw, 72.779vh) scale(0.1344);
  }
  to {
    transform: translate(23.85745vw, 100vh) scale(0.1344);
  }
}
.snow:nth-child(32) {
  opacity: 0.4768;
  transform: translate(81.1228vw, -10px) scale(0.6864);
  animation: fall-32 11s -18s linear infinite;
}
@keyframes fall-32 {
  37.042% {
    transform: translate(71.2362vw, 37.042vh) scale(0.6864);
  }
  to {
    transform: translate(76.1795vw, 100vh) scale(0.6864);
  }
}
.snow:nth-child(33) {
  opacity: 0.0261;
  transform: translate(68.3618vw, -10px) scale(0.0502);
  animation: fall-33 30s -18s linear infinite;
}
@keyframes fall-33 {
  76.681% {
    transform: translate(77.3801vw, 76.681vh) scale(0.0502);
  }
  to {
    transform: translate(72.87095vw, 100vh) scale(0.0502);
  }
}
.snow:nth-child(34) {
  opacity: 0.1095;
  transform: translate(40.6101vw, -10px) scale(0.4455);
  animation: fall-34 10s -26s linear infinite;
}
@keyframes fall-34 {
  56.594% {
    transform: translate(34.8907vw, 56.594vh) scale(0.4455);
  }
  to {
    transform: translate(37.7504vw, 100vh) scale(0.4455);
  }
}
.snow:nth-child(35) {
  opacity: 0.8164;
  transform: translate(22.1163vw, -10px) scale(0.771);
  animation: fall-35 26s -23s linear infinite;
}
@keyframes fall-35 {
  66.33% {
    transform: translate(28.7984vw, 66.33vh) scale(0.771);
  }
  to {
    transform: translate(25.45735vw, 100vh) scale(0.771);
  }
}
.snow:nth-child(36) {
  opacity: 0.8013;
  transform: translate(40.919vw, -10px) scale(0.6552);
  animation: fall-36 12s -18s linear infinite;
}
@keyframes fall-36 {
  66.324% {
    transform: translate(35.7972vw, 66.324vh) scale(0.6552);
  }
  to {
    transform: translate(38.3581vw, 100vh) scale(0.6552);
  }
}
.snow:nth-child(37) {
  opacity: 0.0859;
  transform: translate(3.706vw, -10px) scale(0.1189);
  animation: fall-37 15s -13s linear infinite;
}
@keyframes fall-37 {
  39.624% {
    transform: translate(5.5427vw, 39.624vh) scale(0.1189);
  }
  to {
    transform: translate(4.62435vw, 100vh) scale(0.1189);
  }
}
.snow:nth-child(38) {
  opacity: 0.3802;
  transform: translate(73.9755vw, -10px) scale(0.1065);
  animation: fall-38 23s -24s linear infinite;
}
@keyframes fall-38 {
  62.522% {
    transform: translate(81.9197vw, 62.522vh) scale(0.1065);
  }
  to {
    transform: translate(77.9476vw, 100vh) scale(0.1065);
  }
}
.snow:nth-child(39) {
  opacity: 0.6981;
  transform: translate(74.0242vw, -10px) scale(0.944);
  animation: fall-39 12s -27s linear infinite;
}
@keyframes fall-39 {
  79.783% {
    transform: translate(74.3251vw, 79.783vh) scale(0.944);
  }
  to {
    transform: translate(74.17465vw, 100vh) scale(0.944);
  }
}
.snow:nth-child(40) {
  opacity: 0.5563;
  transform: translate(26.7353vw, -10px) scale(0.2218);
  animation: fall-40 15s -23s linear infinite;
}
@keyframes fall-40 {
  58.999% {
    transform: translate(36.2001vw, 58.999vh) scale(0.2218);
  }
  to {
    transform: translate(31.4677vw, 100vh) scale(0.2218);
  }
}
.snow:nth-child(41) {
  opacity: 0.5154;
  transform: translate(77.3815vw, -10px) scale(0.6826);
  animation: fall-41 24s -2s linear infinite;
}
@keyframes fall-41 {
  39.249% {
    transform: translate(87.3266vw, 39.249vh) scale(0.6826);
  }
  to {
    transform: translate(82.35405vw, 100vh) scale(0.6826);
  }
}
.snow:nth-child(42) {
  opacity: 0.3649;
  transform: translate(21.3489vw, -10px) scale(0.7766);
  animation: fall-42 12s -22s linear infinite;
}
@keyframes fall-42 {
  67.742% {
    transform: translate(27.8437vw, 67.742vh) scale(0.7766);
  }
  to {
    transform: translate(24.5963vw, 100vh) scale(0.7766);
  }
}
.snow:nth-child(43) {
  opacity: 0.5877;
  transform: translate(26.7891vw, -10px) scale(0.9907);
  animation: fall-43 19s -14s linear infinite;
}
@keyframes fall-43 {
  70.112% {
    transform: translate(25.6833vw, 70.112vh) scale(0.9907);
  }
  to {
    transform: translate(26.2362vw, 100vh) scale(0.9907);
  }
}
.snow:nth-child(44) {
  opacity: 0.1866;
  transform: translate(58.2354vw, -10px) scale(0.7886);
  animation: fall-44 29s -29s linear infinite;
}
@keyframes fall-44 {
  70.021% {
    transform: translate(50.5146vw, 70.021vh) scale(0.7886);
  }
  to {
    transform: translate(54.375vw, 100vh) scale(0.7886);
  }
}
.snow:nth-child(45) {
  opacity: 0.4585;
  transform: translate(5.761vw, -10px) scale(0.948);
  animation: fall-45 20s -15s linear infinite;
}
@keyframes fall-45 {
  35.732% {
    transform: translate(-3.8205vw, 35.732vh) scale(0.948);
  }
  to {
    transform: translate(0.97025vw, 100vh) scale(0.948);
  }
}
.snow:nth-child(46) {
  opacity: 0.0313;
  transform: translate(77.2192vw, -10px) scale(0.0833);
  animation: fall-46 28s -16s linear infinite;
}
@keyframes fall-46 {
  51.844% {
    transform: translate(75.3608vw, 51.844vh) scale(0.0833);
  }
  to {
    transform: translate(76.29vw, 100vh) scale(0.0833);
  }
}
.snow:nth-child(47) {
  opacity: 0.5594;
  transform: translate(52.751vw, -10px) scale(0.0316);
  animation: fall-47 23s -30s linear infinite;
}
@keyframes fall-47 {
  55.408% {
    transform: translate(49.3127vw, 55.408vh) scale(0.0316);
  }
  to {
    transform: translate(51.03185vw, 100vh) scale(0.0316);
  }
}
.snow:nth-child(48) {
  opacity: 0.9564;
  transform: translate(24.2948vw, -10px) scale(0.9832);
  animation: fall-48 26s -6s linear infinite;
}
@keyframes fall-48 {
  70.191% {
    transform: translate(22.8777vw, 70.191vh) scale(0.9832);
  }
  to {
    transform: translate(23.58625vw, 100vh) scale(0.9832);
  }
}
.snow:nth-child(49) {
  opacity: 0.8186;
  transform: translate(62.313vw, -10px) scale(0.9003);
  animation: fall-49 22s -16s linear infinite;
}
@keyframes fall-49 {
  54.693% {
    transform: translate(70.7564vw, 54.693vh) scale(0.9003);
  }
  to {
    transform: translate(66.5347vw, 100vh) scale(0.9003);
  }
}
.snow:nth-child(50) {
  opacity: 0.8265;
  transform: translate(65.1953vw, -10px) scale(0.0733);
  animation: fall-50 15s -24s linear infinite;
}
@keyframes fall-50 {
  40.735% {
    transform: translate(57.6803vw, 40.735vh) scale(0.0733);
  }
  to {
    transform: translate(61.4378vw, 100vh) scale(0.0733);
  }
}
.snow:nth-child(51) {
  opacity: 0.9286;
  transform: translate(47.5085vw, -10px) scale(0.8488);
  animation: fall-51 14s -5s linear infinite;
}
@keyframes fall-51 {
  38.421% {
    transform: translate(39.6648vw, 38.421vh) scale(0.8488);
  }
  to {
    transform: translate(43.58665vw, 100vh) scale(0.8488);
  }
}
.snow:nth-child(52) {
  opacity: 0.3131;
  transform: translate(84.7685vw, -10px) scale(0.298);
  animation: fall-52 21s -13s linear infinite;
}
@keyframes fall-52 {
  66.903% {
    transform: translate(93.7526vw, 66.903vh) scale(0.298);
  }
  to {
    transform: translate(89.26055vw, 100vh) scale(0.298);
  }
}
.snow:nth-child(53) {
  opacity: 0.2032;
  transform: translate(80.1865vw, -10px) scale(0.6873);
  animation: fall-53 16s -2s linear infinite;
}
@keyframes fall-53 {
  57.936% {
    transform: translate(85.3903vw, 57.936vh) scale(0.6873);
  }
  to {
    transform: translate(82.7884vw, 100vh) scale(0.6873);
  }
}
.snow:nth-child(54) {
  opacity: 0.046;
  transform: translate(45.9666vw, -10px) scale(0.018);
  animation: fall-54 16s -14s linear infinite;
}
@keyframes fall-54 {
  75.006% {
    transform: translate(38.4287vw, 75.006vh) scale(0.018);
  }
  to {
    transform: translate(42.19765vw, 100vh) scale(0.018);
  }
}
.snow:nth-child(55) {
  opacity: 0.4651;
  transform: translate(79.528vw, -10px) scale(0.6647);
  animation: fall-55 14s -24s linear infinite;
}
@keyframes fall-55 {
  54.348% {
    transform: translate(82.6318vw, 54.348vh) scale(0.6647);
  }
  to {
    transform: translate(81.0799vw, 100vh) scale(0.6647);
  }
}
.snow:nth-child(56) {
  opacity: 0.7732;
  transform: translate(68.2264vw, -10px) scale(0.3423);
  animation: fall-56 26s -28s linear infinite;
}
@keyframes fall-56 {
  71.351% {
    transform: translate(60.8488vw, 71.351vh) scale(0.3423);
  }
  to {
    transform: translate(64.5376vw, 100vh) scale(0.3423);
  }
}
.snow:nth-child(57) {
  opacity: 0.031;
  transform: translate(16.9214vw, -10px) scale(0.236);
  animation: fall-57 12s -27s linear infinite;
}
@keyframes fall-57 {
  36.539% {
    transform: translate(9.7878vw, 36.539vh) scale(0.236);
  }
  to {
    transform: translate(13.3546vw, 100vh) scale(0.236);
  }
}
.snow:nth-child(58) {
  opacity: 0.6307;
  transform: translate(30.0841vw, -10px) scale(0.6548);
  animation: fall-58 11s -7s linear infinite;
}
@keyframes fall-58 {
  54.604% {
    transform: translate(33.2483vw, 54.604vh) scale(0.6548);
  }
  to {
    transform: translate(31.6662vw, 100vh) scale(0.6548);
  }
}
.snow:nth-child(59) {
  opacity: 0.3823;
  transform: translate(83.1829vw, -10px) scale(0.7836);
  animation: fall-59 10s -16s linear infinite;
}
@keyframes fall-59 {
  30.199% {
    transform: translate(75.5415vw, 30.199vh) scale(0.7836);
  }
  to {
    transform: translate(79.3622vw, 100vh) scale(0.7836);
  }
}
.snow:nth-child(60) {
  opacity: 0.9456;
  transform: translate(81.0472vw, -10px) scale(0.0873);
  animation: fall-60 19s -6s linear infinite;
}
@keyframes fall-60 {
  75.405% {
    transform: translate(80.5158vw, 75.405vh) scale(0.0873);
  }
  to {
    transform: translate(80.7815vw, 100vh) scale(0.0873);
  }
}
.snow:nth-child(61) {
  opacity: 0.5807;
  transform: translate(28.139vw, -10px) scale(0.0572);
  animation: fall-61 12s -25s linear infinite;
}
@keyframes fall-61 {
  62.085% {
    transform: translate(28.2627vw, 62.085vh) scale(0.0572);
  }
  to {
    transform: translate(28.20085vw, 100vh) scale(0.0572);
  }
}
.snow:nth-child(62) {
  opacity: 0.9511;
  transform: translate(66.6745vw, -10px) scale(0.7078);
  animation: fall-62 24s -26s linear infinite;
}
@keyframes fall-62 {
  72.536% {
    transform: translate(70.1029vw, 72.536vh) scale(0.7078);
  }
  to {
    transform: translate(68.3887vw, 100vh) scale(0.7078);
  }
}
.snow:nth-child(63) {
  opacity: 0.8931;
  transform: translate(16.6323vw, -10px) scale(0.4805);
  animation: fall-63 13s -3s linear infinite;
}
@keyframes fall-63 {
  76.946% {
    transform: translate(15.1645vw, 76.946vh) scale(0.4805);
  }
  to {
    transform: translate(15.8984vw, 100vh) scale(0.4805);
  }
}
.snow:nth-child(64) {
  opacity: 0.2587;
  transform: translate(2.0298vw, -10px) scale(0.2273);
  animation: fall-64 19s -3s linear infinite;
}
@keyframes fall-64 {
  66.946% {
    transform: translate(11.9917vw, 66.946vh) scale(0.2273);
  }
  to {
    transform: translate(7.01075vw, 100vh) scale(0.2273);
  }
}
.snow:nth-child(65) {
  opacity: 0.7539;
  transform: translate(44.7286vw, -10px) scale(0.5233);
  animation: fall-65 10s -1s linear infinite;
}
@keyframes fall-65 {
  63.89% {
    transform: translate(38.9463vw, 63.89vh) scale(0.5233);
  }
  to {
    transform: translate(41.83745vw, 100vh) scale(0.5233);
  }
}
.snow:nth-child(66) {
  opacity: 0.3215;
  transform: translate(71.6137vw, -10px) scale(0.7662);
  animation: fall-66 11s -30s linear infinite;
}
@keyframes fall-66 {
  58.131% {
    transform: translate(79.5897vw, 58.131vh) scale(0.7662);
  }
  to {
    transform: translate(75.6017vw, 100vh) scale(0.7662);
  }
}
.snow:nth-child(67) {
  opacity: 0.748;
  transform: translate(86.5842vw, -10px) scale(0.9058);
  animation: fall-67 13s -12s linear infinite;
}
@keyframes fall-67 {
  39.861% {
    transform: translate(92.3742vw, 39.861vh) scale(0.9058);
  }
  to {
    transform: translate(89.4792vw, 100vh) scale(0.9058);
  }
}
.snow:nth-child(68) {
  opacity: 0.5309;
  transform: translate(10.3339vw, -10px) scale(0.0542);
  animation: fall-68 12s -12s linear infinite;
}
@keyframes fall-68 {
  31.801% {
    transform: translate(16.173vw, 31.801vh) scale(0.0542);
  }
  to {
    transform: translate(13.25345vw, 100vh) scale(0.0542);
  }
}
.snow:nth-child(69) {
  opacity: 0.0049;
  transform: translate(74.7567vw, -10px) scale(0.667);
  animation: fall-69 28s -27s linear infinite;
}
@keyframes fall-69 {
  57.481% {
    transform: translate(68.5042vw, 57.481vh) scale(0.667);
  }
  to {
    transform: translate(71.63045vw, 100vh) scale(0.667);
  }
}
.snow:nth-child(70) {
  opacity: 0.9242;
  transform: translate(24.6734vw, -10px) scale(0.2218);
  animation: fall-70 26s -22s linear infinite;
}
@keyframes fall-70 {
  65.758% {
    transform: translate(32.0359vw, 65.758vh) scale(0.2218);
  }
  to {
    transform: translate(28.35465vw, 100vh) scale(0.2218);
  }
}
.snow:nth-child(71) {
  opacity: 0.2881;
  transform: translate(58.2642vw, -10px) scale(0.3694);
  animation: fall-71 15s -1s linear infinite;
}
@keyframes fall-71 {
  68.193% {
    transform: translate(60.3826vw, 68.193vh) scale(0.3694);
  }
  to {
    transform: translate(59.3234vw, 100vh) scale(0.3694);
  }
}
.snow:nth-child(72) {
  opacity: 0.6849;
  transform: translate(72.8635vw, -10px) scale(0.397);
  animation: fall-72 10s -5s linear infinite;
}
@keyframes fall-72 {
  76.953% {
    transform: translate(67.4442vw, 76.953vh) scale(0.397);
  }
  to {
    transform: translate(70.15385vw, 100vh) scale(0.397);
  }
}
.snow:nth-child(73) {
  opacity: 0.207;
  transform: translate(88.3624vw, -10px) scale(0.4228);
  animation: fall-73 14s -20s linear infinite;
}
@keyframes fall-73 {
  55.571% {
    transform: translate(93.8251vw, 55.571vh) scale(0.4228);
  }
  to {
    transform: translate(91.09375vw, 100vh) scale(0.4228);
  }
}
.snow:nth-child(74) {
  opacity: 0.7377;
  transform: translate(57.6816vw, -10px) scale(0.655);
  animation: fall-74 15s -24s linear infinite;
}
@keyframes fall-74 {
  73.279% {
    transform: translate(60.5813vw, 73.279vh) scale(0.655);
  }
  to {
    transform: translate(59.13145vw, 100vh) scale(0.655);
  }
}
.snow:nth-child(75) {
  opacity: 0.5627;
  transform: translate(2.5124vw, -10px) scale(0.304);
  animation: fall-75 11s -4s linear infinite;
}
@keyframes fall-75 {
  39.535% {
    transform: translate(1.7815vw, 39.535vh) scale(0.304);
  }
  to {
    transform: translate(2.14695vw, 100vh) scale(0.304);
  }
}
.snow:nth-child(76) {
  opacity: 0.0041;
  transform: translate(13.7081vw, -10px) scale(0.1703);
  animation: fall-76 12s -25s linear infinite;
}
@keyframes fall-76 {
  63.007% {
    transform: translate(7.3946vw, 63.007vh) scale(0.1703);
  }
  to {
    transform: translate(10.55135vw, 100vh) scale(0.1703);
  }
}
.snow:nth-child(77) {
  opacity: 0.5327;
  transform: translate(10.0898vw, -10px) scale(0.4906);
  animation: fall-77 21s -12s linear infinite;
}
@keyframes fall-77 {
  31.11% {
    transform: translate(8.7998vw, 31.11vh) scale(0.4906);
  }
  to {
    transform: translate(9.4448vw, 100vh) scale(0.4906);
  }
}
.snow:nth-child(78) {
  opacity: 0.864;
  transform: translate(52.5138vw, -10px) scale(0.4585);
  animation: fall-78 14s -23s linear infinite;
}
@keyframes fall-78 {
  78.742% {
    transform: translate(43.3562vw, 78.742vh) scale(0.4585);
  }
  to {
    transform: translate(47.935vw, 100vh) scale(0.4585);
  }
}
.snow:nth-child(79) {
  opacity: 0.2499;
  transform: translate(75.0895vw, -10px) scale(0.0782);
  animation: fall-79 19s -6s linear infinite;
}
@keyframes fall-79 {
  39.607% {
    transform: translate(79.9584vw, 39.607vh) scale(0.0782);
  }
  to {
    transform: translate(77.52395vw, 100vh) scale(0.0782);
  }
}
.snow:nth-child(80) {
  opacity: 0.3763;
  transform: translate(55.3387vw, -10px) scale(0.5028);
  animation: fall-80 12s -8s linear infinite;
}
@keyframes fall-80 {
  41.08% {
    transform: translate(62.4147vw, 41.08vh) scale(0.5028);
  }
  to {
    transform: translate(58.8767vw, 100vh) scale(0.5028);
  }
}
.snow:nth-child(81) {
  opacity: 0.603;
  transform: translate(57.0817vw, -10px) scale(0.0228);
  animation: fall-81 20s -22s linear infinite;
}
@keyframes fall-81 {
  62.196% {
    transform: translate(67.0269vw, 62.196vh) scale(0.0228);
  }
  to {
    transform: translate(62.0543vw, 100vh) scale(0.0228);
  }
}
.snow:nth-child(82) {
  opacity: 0.9333;
  transform: translate(29.1071vw, -10px) scale(0.2463);
  animation: fall-82 25s -27s linear infinite;
}
@keyframes fall-82 {
  54.702% {
    transform: translate(27.4336vw, 54.702vh) scale(0.2463);
  }
  to {
    transform: translate(28.27035vw, 100vh) scale(0.2463);
  }
}
.snow:nth-child(83) {
  opacity: 0.5511;
  transform: translate(69.8852vw, -10px) scale(0.7978);
  animation: fall-83 12s -12s linear infinite;
}
@keyframes fall-83 {
  49.061% {
    transform: translate(77.3253vw, 49.061vh) scale(0.7978);
  }
  to {
    transform: translate(73.60525vw, 100vh) scale(0.7978);
  }
}
.snow:nth-child(84) {
  opacity: 0.1065;
  transform: translate(67.9897vw, -10px) scale(0.6201);
  animation: fall-84 29s -26s linear infinite;
}
@keyframes fall-84 {
  59.951% {
    transform: translate(58.0781vw, 59.951vh) scale(0.6201);
  }
  to {
    transform: translate(63.0339vw, 100vh) scale(0.6201);
  }
}
.snow:nth-child(85) {
  opacity: 0.1742;
  transform: translate(8.3381vw, -10px) scale(0.6395);
  animation: fall-85 23s -5s linear infinite;
}
@keyframes fall-85 {
  62.956% {
    transform: translate(17.0374vw, 62.956vh) scale(0.6395);
  }
  to {
    transform: translate(12.68775vw, 100vh) scale(0.6395);
  }
}
.snow:nth-child(86) {
  opacity: 0.1074;
  transform: translate(59.3143vw, -10px) scale(0.714);
  animation: fall-86 23s -26s linear infinite;
}
@keyframes fall-86 {
  77.409% {
    transform: translate(53.9666vw, 77.409vh) scale(0.714);
  }
  to {
    transform: translate(56.64045vw, 100vh) scale(0.714);
  }
}
.snow:nth-child(87) {
  opacity: 0.8334;
  transform: translate(80.7596vw, -10px) scale(0.7372);
  animation: fall-87 20s -21s linear infinite;
}
@keyframes fall-87 {
  36.993% {
    transform: translate(71.222vw, 36.993vh) scale(0.7372);
  }
  to {
    transform: translate(75.9908vw, 100vh) scale(0.7372);
  }
}
.snow:nth-child(88) {
  opacity: 0.729;
  transform: translate(97.5756vw, -10px) scale(0.1105);
  animation: fall-88 11s -1s linear infinite;
}
@keyframes fall-88 {
  38.652% {
    transform: translate(88.908vw, 38.652vh) scale(0.1105);
  }
  to {
    transform: translate(93.2418vw, 100vh) scale(0.1105);
  }
}
.snow:nth-child(89) {
  opacity: 0.5781;
  transform: translate(86.1088vw, -10px) scale(0.4584);
  animation: fall-89 24s -19s linear infinite;
}
@keyframes fall-89 {
  75.483% {
    transform: translate(80.4454vw, 75.483vh) scale(0.4584);
  }
  to {
    transform: translate(83.2771vw, 100vh) scale(0.4584);
  }
}
.snow:nth-child(90) {
  opacity: 0.6043;
  transform: translate(13.7531vw, -10px) scale(0.8045);
  animation: fall-90 26s -17s linear infinite;
}
@keyframes fall-90 {
  37.865% {
    transform: translate(7.4647vw, 37.865vh) scale(0.8045);
  }
  to {
    transform: translate(10.6089vw, 100vh) scale(0.8045);
  }
}
.snow:nth-child(91) {
  opacity: 0.1553;
  transform: translate(94.3176vw, -10px) scale(0.7166);
  animation: fall-91 19s -17s linear infinite;
}
@keyframes fall-91 {
  57.865% {
    transform: translate(99.2769vw, 57.865vh) scale(0.7166);
  }
  to {
    transform: translate(96.79725vw, 100vh) scale(0.7166);
  }
}
.snow:nth-child(92) {
  opacity: 0.6609;
  transform: translate(56.7037vw, -10px) scale(0.7493);
  animation: fall-92 12s -26s linear infinite;
}
@keyframes fall-92 {
  60.042% {
    transform: translate(50.8787vw, 60.042vh) scale(0.7493);
  }
  to {
    transform: translate(53.7912vw, 100vh) scale(0.7493);
  }
}
.snow:nth-child(93) {
  opacity: 0.3006;
  transform: translate(76.46vw, -10px) scale(0.1083);
  animation: fall-93 18s -2s linear infinite;
}
@keyframes fall-93 {
  41.213% {
    transform: translate(81.407vw, 41.213vh) scale(0.1083);
  }
  to {
    transform: translate(78.9335vw, 100vh) scale(0.1083);
  }
}
.snow:nth-child(94) {
  opacity: 0.4391;
  transform: translate(86.4995vw, -10px) scale(0.3683);
  animation: fall-94 26s -12s linear infinite;
}
@keyframes fall-94 {
  43.419% {
    transform: translate(96.0667vw, 43.419vh) scale(0.3683);
  }
  to {
    transform: translate(91.2831vw, 100vh) scale(0.3683);
  }
}
.snow:nth-child(95) {
  opacity: 0.8097;
  transform: translate(9.6784vw, -10px) scale(0.8268);
  animation: fall-95 14s -2s linear infinite;
}
@keyframes fall-95 {
  44.762% {
    transform: translate(9.7368vw, 44.762vh) scale(0.8268);
  }
  to {
    transform: translate(9.7076vw, 100vh) scale(0.8268);
  }
}
.snow:nth-child(96) {
  opacity: 0.7244;
  transform: translate(97.3669vw, -10px) scale(0.8581);
  animation: fall-96 26s -3s linear infinite;
}
@keyframes fall-96 {
  57.481% {
    transform: translate(105.5152vw, 57.481vh) scale(0.8581);
  }
  to {
    transform: translate(101.44105vw, 100vh) scale(0.8581);
  }
}
.snow:nth-child(97) {
  opacity: 0.3986;
  transform: translate(84.3485vw, -10px) scale(0.4571);
  animation: fall-97 15s -9s linear infinite;
}
@keyframes fall-97 {
  50.77% {
    transform: translate(74.6046vw, 50.77vh) scale(0.4571);
  }
  to {
    transform: translate(79.47655vw, 100vh) scale(0.4571);
  }
}
.snow:nth-child(98) {
  opacity: 0.9105;
  transform: translate(5.8828vw, -10px) scale(0.0119);
  animation: fall-98 25s -27s linear infinite;
}
@keyframes fall-98 {
  65.865% {
    transform: translate(12.759vw, 65.865vh) scale(0.0119);
  }
  to {
    transform: translate(9.3209vw, 100vh) scale(0.0119);
  }
}
.snow:nth-child(99) {
  opacity: 0.2714;
  transform: translate(83.4175vw, -10px) scale(0.1732);
  animation: fall-99 17s -17s linear infinite;
}
@keyframes fall-99 {
  61.131% {
    transform: translate(81.6317vw, 61.131vh) scale(0.1732);
  }
  to {
    transform: translate(82.5246vw, 100vh) scale(0.1732);
  }
}
.snow:nth-child(100) {
  opacity: 0.9335;
  transform: translate(76.3774vw, -10px) scale(0.2009);
  animation: fall-100 18s -18s linear infinite;
}
@keyframes fall-100 {
  47.466% {
    transform: translate(70.0568vw, 47.466vh) scale(0.2009);
  }
  to {
    transform: translate(73.2171vw, 100vh) scale(0.2009);
  }
}
.snow:nth-child(101) {
  opacity: 0.9341;
  transform: translate(8.951vw, -10px) scale(0.3138);
  animation: fall-101 20s -26s linear infinite;
}
@keyframes fall-101 {
  34.798% {
    transform: translate(6.1254vw, 34.798vh) scale(0.3138);
  }
  to {
    transform: translate(7.5382vw, 100vh) scale(0.3138);
  }
}
.snow:nth-child(102) {
  opacity: 0.0456;
  transform: translate(79.6129vw, -10px) scale(0.2944);
  animation: fall-102 24s -6s linear infinite;
}
@keyframes fall-102 {
  61.732% {
    transform: translate(89.0152vw, 61.732vh) scale(0.2944);
  }
  to {
    transform: translate(84.31405vw, 100vh) scale(0.2944);
  }
}
.snow:nth-child(103) {
  opacity: 0.3118;
  transform: translate(3.5653vw, -10px) scale(0.547);
  animation: fall-103 21s -16s linear infinite;
}
@keyframes fall-103 {
  39.373% {
    transform: translate(9.7674vw, 39.373vh) scale(0.547);
  }
  to {
    transform: translate(6.66635vw, 100vh) scale(0.547);
  }
}
.snow:nth-child(104) {
  opacity: 0.2126;
  transform: translate(85.6456vw, -10px) scale(0.7098);
  animation: fall-104 28s -13s linear infinite;
}
@keyframes fall-104 {
  58.485% {
    transform: translate(77.3463vw, 58.485vh) scale(0.7098);
  }
  to {
    transform: translate(81.49595vw, 100vh) scale(0.7098);
  }
}
.snow:nth-child(105) {
  opacity: 0.4413;
  transform: translate(34.2899vw, -10px) scale(0.2173);
  animation: fall-105 25s -14s linear infinite;
}
@keyframes fall-105 {
  71.388% {
    transform: translate(42.766vw, 71.388vh) scale(0.2173);
  }
  to {
    transform: translate(38.52795vw, 100vh) scale(0.2173);
  }
}
.snow:nth-child(106) {
  opacity: 0.9972;
  transform: translate(22.9537vw, -10px) scale(0.5839);
  animation: fall-106 13s -1s linear infinite;
}
@keyframes fall-106 {
  43.385% {
    transform: translate(22.1883vw, 43.385vh) scale(0.5839);
  }
  to {
    transform: translate(22.571vw, 100vh) scale(0.5839);
  }
}
.snow:nth-child(107) {
  opacity: 0.2011;
  transform: translate(7.2974vw, -10px) scale(0.8441);
  animation: fall-107 27s -20s linear infinite;
}
@keyframes fall-107 {
  33.432% {
    transform: translate(1.4315vw, 33.432vh) scale(0.8441);
  }
  to {
    transform: translate(4.36445vw, 100vh) scale(0.8441);
  }
}
.snow:nth-child(108) {
  opacity: 0.8712;
  transform: translate(10.7336vw, -10px) scale(0.3833);
  animation: fall-108 20s -16s linear infinite;
}
@keyframes fall-108 {
  66.407% {
    transform: translate(8.9072vw, 66.407vh) scale(0.3833);
  }
  to {
    transform: translate(9.8204vw, 100vh) scale(0.3833);
  }
}
.snow:nth-child(109) {
  opacity: 0.0288;
  transform: translate(18.2415vw, -10px) scale(0.4954);
  animation: fall-109 24s -7s linear infinite;
}
@keyframes fall-109 {
  30.914% {
    transform: translate(27.742vw, 30.914vh) scale(0.4954);
  }
  to {
    transform: translate(22.99175vw, 100vh) scale(0.4954);
  }
}
.snow:nth-child(110) {
  opacity: 0.7672;
  transform: translate(81.466vw, -10px) scale(0.5277);
  animation: fall-110 20s -3s linear infinite;
}
@keyframes fall-110 {
  57.356% {
    transform: translate(77.9084vw, 57.356vh) scale(0.5277);
  }
  to {
    transform: translate(79.6872vw, 100vh) scale(0.5277);
  }
}
.snow:nth-child(111) {
  opacity: 0.5543;
  transform: translate(12.0682vw, -10px) scale(0.054);
  animation: fall-111 27s -25s linear infinite;
}
@keyframes fall-111 {
  77.521% {
    transform: translate(12.8589vw, 77.521vh) scale(0.054);
  }
  to {
    transform: translate(12.46355vw, 100vh) scale(0.054);
  }
}
.snow:nth-child(112) {
  opacity: 0.8923;
  transform: translate(52.0707vw, -10px) scale(0.9549);
  animation: fall-112 13s -16s linear infinite;
}
@keyframes fall-112 {
  50.452% {
    transform: translate(56.3481vw, 50.452vh) scale(0.9549);
  }
  to {
    transform: translate(54.2094vw, 100vh) scale(0.9549);
  }
}
.snow:nth-child(113) {
  opacity: 0.0574;
  transform: translate(30.4091vw, -10px) scale(0.042);
  animation: fall-113 25s -13s linear infinite;
}
@keyframes fall-113 {
  67.618% {
    transform: translate(26.1637vw, 67.618vh) scale(0.042);
  }
  to {
    transform: translate(28.2864vw, 100vh) scale(0.042);
  }
}
.snow:nth-child(114) {
  opacity: 0.3234;
  transform: translate(13.5207vw, -10px) scale(0.8713);
  animation: fall-114 29s -12s linear infinite;
}
@keyframes fall-114 {
  79.09% {
    transform: translate(15.5225vw, 79.09vh) scale(0.8713);
  }
  to {
    transform: translate(14.5216vw, 100vh) scale(0.8713);
  }
}
.snow:nth-child(115) {
  opacity: 0.5773;
  transform: translate(80.7144vw, -10px) scale(0.7899);
  animation: fall-115 27s -17s linear infinite;
}
@keyframes fall-115 {
  74.349% {
    transform: translate(76.4287vw, 74.349vh) scale(0.7899);
  }
  to {
    transform: translate(78.57155vw, 100vh) scale(0.7899);
  }
}
.snow:nth-child(116) {
  opacity: 0.3826;
  transform: translate(9.9069vw, -10px) scale(0.8487);
  animation: fall-116 22s -4s linear infinite;
}
@keyframes fall-116 {
  61.761% {
    transform: translate(9.3719vw, 61.761vh) scale(0.8487);
  }
  to {
    transform: translate(9.6394vw, 100vh) scale(0.8487);
  }
}
.snow:nth-child(117) {
  opacity: 0.288;
  transform: translate(6.2744vw, -10px) scale(0.1322);
  animation: fall-117 19s -22s linear infinite;
}
@keyframes fall-117 {
  66.768% {
    transform: translate(4.9953vw, 66.768vh) scale(0.1322);
  }
  to {
    transform: translate(5.63485vw, 100vh) scale(0.1322);
  }
}
.snow:nth-child(118) {
  opacity: 0.0753;
  transform: translate(75.2417vw, -10px) scale(0.5419);
  animation: fall-118 10s -29s linear infinite;
}
@keyframes fall-118 {
  74.546% {
    transform: translate(74.2791vw, 74.546vh) scale(0.5419);
  }
  to {
    transform: translate(74.7604vw, 100vh) scale(0.5419);
  }
}
.snow:nth-child(119) {
  opacity: 0.9463;
  transform: translate(37.5639vw, -10px) scale(0.5741);
  animation: fall-119 21s -25s linear infinite;
}
@keyframes fall-119 {
  40.697% {
    transform: translate(39.3965vw, 40.697vh) scale(0.5741);
  }
  to {
    transform: translate(38.4802vw, 100vh) scale(0.5741);
  }
}
.snow:nth-child(120) {
  opacity: 0.8256;
  transform: translate(82.0837vw, -10px) scale(0.7476);
  animation: fall-120 23s -29s linear infinite;
}
@keyframes fall-120 {
  74.971% {
    transform: translate(79.9739vw, 74.971vh) scale(0.7476);
  }
  to {
    transform: translate(81.0288vw, 100vh) scale(0.7476);
  }
}
.snow:nth-child(121) {
  opacity: 0.9257;
  transform: translate(47.2064vw, -10px) scale(0.2346);
  animation: fall-121 15s -6s linear infinite;
}
@keyframes fall-121 {
  56.382% {
    transform: translate(54.6468vw, 56.382vh) scale(0.2346);
  }
  to {
    transform: translate(50.9266vw, 100vh) scale(0.2346);
  }
}
.snow:nth-child(122) {
  opacity: 0.247;
  transform: translate(94.9986vw, -10px) scale(0.108);
  animation: fall-122 14s -25s linear infinite;
}
@keyframes fall-122 {
  33.707% {
    transform: translate(88.4359vw, 33.707vh) scale(0.108);
  }
  to {
    transform: translate(91.71725vw, 100vh) scale(0.108);
  }
}
.snow:nth-child(123) {
  opacity: 0.1614;
  transform: translate(55.9631vw, -10px) scale(0.6044);
  animation: fall-123 14s -1s linear infinite;
}
@keyframes fall-123 {
  44.828% {
    transform: translate(48.8204vw, 44.828vh) scale(0.6044);
  }
  to {
    transform: translate(52.39175vw, 100vh) scale(0.6044);
  }
}
.snow:nth-child(124) {
  opacity: 0.7098;
  transform: translate(56.8721vw, -10px) scale(0.8311);
  animation: fall-124 12s -23s linear infinite;
}
@keyframes fall-124 {
  32.77% {
    transform: translate(60.3073vw, 32.77vh) scale(0.8311);
  }
  to {
    transform: translate(58.5897vw, 100vh) scale(0.8311);
  }
}
.snow:nth-child(125) {
  opacity: 0.7909;
  transform: translate(18.5029vw, -10px) scale(0.1431);
  animation: fall-125 23s -23s linear infinite;
}
@keyframes fall-125 {
  44.416% {
    transform: translate(27.9024vw, 44.416vh) scale(0.1431);
  }
  to {
    transform: translate(23.20265vw, 100vh) scale(0.1431);
  }
}
.snow:nth-child(126) {
  opacity: 0.0193;
  transform: translate(93.6078vw, -10px) scale(0.7927);
  animation: fall-126 12s -5s linear infinite;
}
@keyframes fall-126 {
  60.789% {
    transform: translate(89.0023vw, 60.789vh) scale(0.7927);
  }
  to {
    transform: translate(91.30505vw, 100vh) scale(0.7927);
  }
}
.snow:nth-child(127) {
  opacity: 0.7776;
  transform: translate(76.7129vw, -10px) scale(0.3663);
  animation: fall-127 13s -11s linear infinite;
}
@keyframes fall-127 {
  67.26% {
    transform: translate(86.0357vw, 67.26vh) scale(0.3663);
  }
  to {
    transform: translate(81.3743vw, 100vh) scale(0.3663);
  }
}
.snow:nth-child(128) {
  opacity: 0.7981;
  transform: translate(76.4073vw, -10px) scale(0.5918);
  animation: fall-128 29s -23s linear infinite;
}
@keyframes fall-128 {
  42.425% {
    transform: translate(68.0237vw, 42.425vh) scale(0.5918);
  }
  to {
    transform: translate(72.2155vw, 100vh) scale(0.5918);
  }
}
.snow:nth-child(129) {
  opacity: 0.2908;
  transform: translate(94.2801vw, -10px) scale(0.6615);
  animation: fall-129 19s -27s linear infinite;
}
@keyframes fall-129 {
  78.221% {
    transform: translate(95.4522vw, 78.221vh) scale(0.6615);
  }
  to {
    transform: translate(94.86615vw, 100vh) scale(0.6615);
  }
}
.snow:nth-child(130) {
  opacity: 0.7883;
  transform: translate(88.2349vw, -10px) scale(0.4079);
  animation: fall-130 10s -17s linear infinite;
}
@keyframes fall-130 {
  69.973% {
    transform: translate(87.1927vw, 69.973vh) scale(0.4079);
  }
  to {
    transform: translate(87.7138vw, 100vh) scale(0.4079);
  }
}
.snow:nth-child(131) {
  opacity: 0.3942;
  transform: translate(25.5761vw, -10px) scale(0.1007);
  animation: fall-131 21s -8s linear infinite;
}
@keyframes fall-131 {
  36.105% {
    transform: translate(31.2406vw, 36.105vh) scale(0.1007);
  }
  to {
    transform: translate(28.40835vw, 100vh) scale(0.1007);
  }
}
.snow:nth-child(132) {
  opacity: 0.2951;
  transform: translate(95.3167vw, -10px) scale(0.6431);
  animation: fall-132 27s -4s linear infinite;
}
@keyframes fall-132 {
  56.578% {
    transform: translate(91.5771vw, 56.578vh) scale(0.6431);
  }
  to {
    transform: translate(93.4469vw, 100vh) scale(0.6431);
  }
}
.snow:nth-child(133) {
  opacity: 0.5908;
  transform: translate(35.6754vw, -10px) scale(0.135);
  animation: fall-133 16s -10s linear infinite;
}
@keyframes fall-133 {
  68.611% {
    transform: translate(42.7005vw, 68.611vh) scale(0.135);
  }
  to {
    transform: translate(39.18795vw, 100vh) scale(0.135);
  }
}
.snow:nth-child(134) {
  opacity: 0.0521;
  transform: translate(2.5628vw, -10px) scale(0.13);
  animation: fall-134 14s -24s linear infinite;
}
@keyframes fall-134 {
  35.89% {
    transform: translate(6.1609vw, 35.89vh) scale(0.13);
  }
  to {
    transform: translate(4.36185vw, 100vh) scale(0.13);
  }
}
.snow:nth-child(135) {
  opacity: 0.9903;
  transform: translate(37.8917vw, -10px) scale(0.7473);
  animation: fall-135 20s -21s linear infinite;
}
@keyframes fall-135 {
  42.754% {
    transform: translate(47.473vw, 42.754vh) scale(0.7473);
  }
  to {
    transform: translate(42.68235vw, 100vh) scale(0.7473);
  }
}
.snow:nth-child(136) {
  opacity: 0.0231;
  transform: translate(83.0193vw, -10px) scale(0.2702);
  animation: fall-136 18s -21s linear infinite;
}
@keyframes fall-136 {
  76.689% {
    transform: translate(91.6738vw, 76.689vh) scale(0.2702);
  }
  to {
    transform: translate(87.34655vw, 100vh) scale(0.2702);
  }
}
.snow:nth-child(137) {
  opacity: 0.7749;
  transform: translate(50.7522vw, -10px) scale(0.6324);
  animation: fall-137 25s -22s linear infinite;
}
@keyframes fall-137 {
  39.543% {
    transform: translate(46.9304vw, 39.543vh) scale(0.6324);
  }
  to {
    transform: translate(48.8413vw, 100vh) scale(0.6324);
  }
}
.snow:nth-child(138) {
  opacity: 0.4206;
  transform: translate(34.6729vw, -10px) scale(0.6825);
  animation: fall-138 30s -27s linear infinite;
}
@keyframes fall-138 {
  67.862% {
    transform: translate(41.548vw, 67.862vh) scale(0.6825);
  }
  to {
    transform: translate(38.11045vw, 100vh) scale(0.6825);
  }
}
.snow:nth-child(139) {
  opacity: 0.7281;
  transform: translate(94.0817vw, -10px) scale(0.8007);
  animation: fall-139 26s -17s linear infinite;
}
@keyframes fall-139 {
  50.763% {
    transform: translate(92.6456vw, 50.763vh) scale(0.8007);
  }
  to {
    transform: translate(93.36365vw, 100vh) scale(0.8007);
  }
}
.snow:nth-child(140) {
  opacity: 0.3709;
  transform: translate(84.8629vw, -10px) scale(0.0221);
  animation: fall-140 13s -4s linear infinite;
}
@keyframes fall-140 {
  58.289% {
    transform: translate(91.7087vw, 58.289vh) scale(0.0221);
  }
  to {
    transform: translate(88.2858vw, 100vh) scale(0.0221);
  }
}
.snow:nth-child(141) {
  opacity: 0.5293;
  transform: translate(37.3382vw, -10px) scale(0.0746);
  animation: fall-141 16s -4s linear infinite;
}
@keyframes fall-141 {
  33.823% {
    transform: translate(34.779vw, 33.823vh) scale(0.0746);
  }
  to {
    transform: translate(36.0586vw, 100vh) scale(0.0746);
  }
}
.snow:nth-child(142) {
  opacity: 0.4144;
  transform: translate(47.6716vw, -10px) scale(0.7611);
  animation: fall-142 16s -17s linear infinite;
}
@keyframes fall-142 {
  65.262% {
    transform: translate(43.5365vw, 65.262vh) scale(0.7611);
  }
  to {
    transform: translate(45.60405vw, 100vh) scale(0.7611);
  }
}
.snow:nth-child(143) {
  opacity: 0.7669;
  transform: translate(53.2951vw, -10px) scale(0.0689);
  animation: fall-143 14s -13s linear infinite;
}
@keyframes fall-143 {
  78.262% {
    transform: translate(54.6388vw, 78.262vh) scale(0.0689);
  }
  to {
    transform: translate(53.96695vw, 100vh) scale(0.0689);
  }
}
.snow:nth-child(144) {
  opacity: 0.137;
  transform: translate(79.5986vw, -10px) scale(0.4743);
  animation: fall-144 17s -3s linear infinite;
}
@keyframes fall-144 {
  42.195% {
    transform: translate(71.592vw, 42.195vh) scale(0.4743);
  }
  to {
    transform: translate(75.5953vw, 100vh) scale(0.4743);
  }
}
.snow:nth-child(145) {
  opacity: 0.3566;
  transform: translate(57.8241vw, -10px) scale(0.4296);
  animation: fall-145 15s -19s linear infinite;
}
@keyframes fall-145 {
  78.471% {
    transform: translate(57.3351vw, 78.471vh) scale(0.4296);
  }
  to {
    transform: translate(57.5796vw, 100vh) scale(0.4296);
  }
}
.snow:nth-child(146) {
  opacity: 0.8214;
  transform: translate(52.5518vw, -10px) scale(0.1574);
  animation: fall-146 20s -6s linear infinite;
}
@keyframes fall-146 {
  64.604% {
    transform: translate(49.1682vw, 64.604vh) scale(0.1574);
  }
  to {
    transform: translate(50.86vw, 100vh) scale(0.1574);
  }
}
.snow:nth-child(147) {
  opacity: 0.5978;
  transform: translate(54.5268vw, -10px) scale(0.9057);
  animation: fall-147 28s -21s linear infinite;
}
@keyframes fall-147 {
  39.501% {
    transform: translate(46.7495vw, 39.501vh) scale(0.9057);
  }
  to {
    transform: translate(50.63815vw, 100vh) scale(0.9057);
  }
}
.snow:nth-child(148) {
  opacity: 0.5911;
  transform: translate(53.0067vw, -10px) scale(0.7022);
  animation: fall-148 12s -6s linear infinite;
}
@keyframes fall-148 {
  48.053% {
    transform: translate(52.5463vw, 48.053vh) scale(0.7022);
  }
  to {
    transform: translate(52.7765vw, 100vh) scale(0.7022);
  }
}
.snow:nth-child(149) {
  opacity: 0.6817;
  transform: translate(30.5375vw, -10px) scale(0.2474);
  animation: fall-149 30s -6s linear infinite;
}
@keyframes fall-149 {
  63.935% {
    transform: translate(36.5015vw, 63.935vh) scale(0.2474);
  }
  to {
    transform: translate(33.5195vw, 100vh) scale(0.2474);
  }
}
.snow:nth-child(150) {
  opacity: 0.0288;
  transform: translate(69.0143vw, -10px) scale(0.5806);
  animation: fall-150 17s -6s linear infinite;
}
@keyframes fall-150 {
  34.866% {
    transform: translate(67.7559vw, 34.866vh) scale(0.5806);
  }
  to {
    transform: translate(68.3851vw, 100vh) scale(0.5806);
  }
}
.snow:nth-child(151) {
  opacity: 0.7829;
  transform: translate(9.3741vw, -10px) scale(0.4145);
  animation: fall-151 28s -9s linear infinite;
}
@keyframes fall-151 {
  67.527% {
    transform: translate(3.3292vw, 67.527vh) scale(0.4145);
  }
  to {
    transform: translate(6.35165vw, 100vh) scale(0.4145);
  }
}
.snow:nth-child(152) {
  opacity: 0.6799;
  transform: translate(15.1227vw, -10px) scale(0.7413);
  animation: fall-152 28s -2s linear infinite;
}
@keyframes fall-152 {
  53.398% {
    transform: translate(8.575vw, 53.398vh) scale(0.7413);
  }
  to {
    transform: translate(11.84885vw, 100vh) scale(0.7413);
  }
}
.snow:nth-child(153) {
  opacity: 0.5596;
  transform: translate(19.1519vw, -10px) scale(0.1317);
  animation: fall-153 29s -3s linear infinite;
}
@keyframes fall-153 {
  46.392% {
    transform: translate(16.1849vw, 46.392vh) scale(0.1317);
  }
  to {
    transform: translate(17.6684vw, 100vh) scale(0.1317);
  }
}
.snow:nth-child(154) {
  opacity: 0.6758;
  transform: translate(77.897vw, -10px) scale(0.3647);
  animation: fall-154 16s -25s linear infinite;
}
@keyframes fall-154 {
  37.85% {
    transform: translate(75.3609vw, 37.85vh) scale(0.3647);
  }
  to {
    transform: translate(76.62895vw, 100vh) scale(0.3647);
  }
}
.snow:nth-child(155) {
  opacity: 0.1168;
  transform: translate(8.2877vw, -10px) scale(0.706);
  animation: fall-155 20s -26s linear infinite;
}
@keyframes fall-155 {
  43.117% {
    transform: translate(4.2476vw, 43.117vh) scale(0.706);
  }
  to {
    transform: translate(6.26765vw, 100vh) scale(0.706);
  }
}
.snow:nth-child(156) {
  opacity: 0.4467;
  transform: translate(94.6401vw, -10px) scale(0.1017);
  animation: fall-156 10s -7s linear infinite;
}
@keyframes fall-156 {
  52.762% {
    transform: translate(96.0102vw, 52.762vh) scale(0.1017);
  }
  to {
    transform: translate(95.32515vw, 100vh) scale(0.1017);
  }
}
.snow:nth-child(157) {
  opacity: 0.7719;
  transform: translate(8.9427vw, -10px) scale(0.243);
  animation: fall-157 24s -21s linear infinite;
}
@keyframes fall-157 {
  48.198% {
    transform: translate(10.3356vw, 48.198vh) scale(0.243);
  }
  to {
    transform: translate(9.63915vw, 100vh) scale(0.243);
  }
}
.snow:nth-child(158) {
  opacity: 0.0551;
  transform: translate(49.8754vw, -10px) scale(0.5685);
  animation: fall-158 16s -15s linear infinite;
}
@keyframes fall-158 {
  74.033% {
    transform: translate(51.147vw, 74.033vh) scale(0.5685);
  }
  to {
    transform: translate(50.5112vw, 100vh) scale(0.5685);
  }
}
.snow:nth-child(159) {
  opacity: 0.6524;
  transform: translate(52.2679vw, -10px) scale(0.3706);
  animation: fall-159 21s -16s linear infinite;
}
@keyframes fall-159 {
  48.789% {
    transform: translate(60.0719vw, 48.789vh) scale(0.3706);
  }
  to {
    transform: translate(56.1699vw, 100vh) scale(0.3706);
  }
}
.snow:nth-child(160) {
  opacity: 0.7329;
  transform: translate(85.6904vw, -10px) scale(0.1855);
  animation: fall-160 14s -9s linear infinite;
}
@keyframes fall-160 {
  59.222% {
    transform: translate(88.7918vw, 59.222vh) scale(0.1855);
  }
  to {
    transform: translate(87.2411vw, 100vh) scale(0.1855);
  }
}
.snow:nth-child(161) {
  opacity: 0.6469;
  transform: translate(69.2885vw, -10px) scale(0.9743);
  animation: fall-161 15s -2s linear infinite;
}
@keyframes fall-161 {
  47.692% {
    transform: translate(61.2372vw, 47.692vh) scale(0.9743);
  }
  to {
    transform: translate(65.26285vw, 100vh) scale(0.9743);
  }
}
.snow:nth-child(162) {
  opacity: 0.2302;
  transform: translate(31.3022vw, -10px) scale(0.6453);
  animation: fall-162 29s -19s linear infinite;
}
@keyframes fall-162 {
  63.985% {
    transform: translate(27.042vw, 63.985vh) scale(0.6453);
  }
  to {
    transform: translate(29.1721vw, 100vh) scale(0.6453);
  }
}
.snow:nth-child(163) {
  opacity: 0.844;
  transform: translate(35.7037vw, -10px) scale(0.5236);
  animation: fall-163 27s -25s linear infinite;
}
@keyframes fall-163 {
  46.942% {
    transform: translate(38.3775vw, 46.942vh) scale(0.5236);
  }
  to {
    transform: translate(37.0406vw, 100vh) scale(0.5236);
  }
}
.snow:nth-child(164) {
  opacity: 0.4736;
  transform: translate(73.8773vw, -10px) scale(0.8265);
  animation: fall-164 23s -23s linear infinite;
}
@keyframes fall-164 {
  39.75% {
    transform: translate(76.8865vw, 39.75vh) scale(0.8265);
  }
  to {
    transform: translate(75.3819vw, 100vh) scale(0.8265);
  }
}
.snow:nth-child(165) {
  opacity: 0.2332;
  transform: translate(8.6012vw, -10px) scale(0.0016);
  animation: fall-165 15s -24s linear infinite;
}
@keyframes fall-165 {
  41.116% {
    transform: translate(14.6359vw, 41.116vh) scale(0.0016);
  }
  to {
    transform: translate(11.61855vw, 100vh) scale(0.0016);
  }
}
.snow:nth-child(166) {
  opacity: 0.1092;
  transform: translate(17.6119vw, -10px) scale(0.644);
  animation: fall-166 17s -17s linear infinite;
}
@keyframes fall-166 {
  75.348% {
    transform: translate(26.5713vw, 75.348vh) scale(0.644);
  }
  to {
    transform: translate(22.0916vw, 100vh) scale(0.644);
  }
}
.snow:nth-child(167) {
  opacity: 0.9414;
  transform: translate(42.7289vw, -10px) scale(0.0978);
  animation: fall-167 22s -6s linear infinite;
}
@keyframes fall-167 {
  46.117% {
    transform: translate(37.23vw, 46.117vh) scale(0.0978);
  }
  to {
    transform: translate(39.97945vw, 100vh) scale(0.0978);
  }
}
.snow:nth-child(168) {
  opacity: 0.1167;
  transform: translate(46.1091vw, -10px) scale(0.8117);
  animation: fall-168 15s -6s linear infinite;
}
@keyframes fall-168 {
  44.992% {
    transform: translate(38.285vw, 44.992vh) scale(0.8117);
  }
  to {
    transform: translate(42.19705vw, 100vh) scale(0.8117);
  }
}
.snow:nth-child(169) {
  opacity: 0.8934;
  transform: translate(87.5937vw, -10px) scale(0.0289);
  animation: fall-169 23s -3s linear infinite;
}
@keyframes fall-169 {
  36.929% {
    transform: translate(78.2203vw, 36.929vh) scale(0.0289);
  }
  to {
    transform: translate(82.907vw, 100vh) scale(0.0289);
  }
}
.snow:nth-child(170) {
  opacity: 0.9746;
  transform: translate(25.2976vw, -10px) scale(0.6303);
  animation: fall-170 22s -26s linear infinite;
}
@keyframes fall-170 {
  79.261% {
    transform: translate(23.2166vw, 79.261vh) scale(0.6303);
  }
  to {
    transform: translate(24.2571vw, 100vh) scale(0.6303);
  }
}
.snow:nth-child(171) {
  opacity: 0.619;
  transform: translate(93.1706vw, -10px) scale(0.5446);
  animation: fall-171 29s -30s linear infinite;
}
@keyframes fall-171 {
  58.586% {
    transform: translate(90.2118vw, 58.586vh) scale(0.5446);
  }
  to {
    transform: translate(91.6912vw, 100vh) scale(0.5446);
  }
}
.snow:nth-child(172) {
  opacity: 0.285;
  transform: translate(93.5299vw, -10px) scale(0.9398);
  animation: fall-172 13s -27s linear infinite;
}
@keyframes fall-172 {
  48.608% {
    transform: translate(89.3176vw, 48.608vh) scale(0.9398);
  }
  to {
    transform: translate(91.42375vw, 100vh) scale(0.9398);
  }
}
.snow:nth-child(173) {
  opacity: 0.5014;
  transform: translate(69.3365vw, -10px) scale(0.5765);
  animation: fall-173 22s -28s linear infinite;
}
@keyframes fall-173 {
  63.125% {
    transform: translate(61.7713vw, 63.125vh) scale(0.5765);
  }
  to {
    transform: translate(65.5539vw, 100vh) scale(0.5765);
  }
}
.snow:nth-child(174) {
  opacity: 0.7944;
  transform: translate(1.1575vw, -10px) scale(0.7107);
  animation: fall-174 17s -13s linear infinite;
}
@keyframes fall-174 {
  39.512% {
    transform: translate(-1.6824vw, 39.512vh) scale(0.7107);
  }
  to {
    transform: translate(-0.26245vw, 100vh) scale(0.7107);
  }
}
.snow:nth-child(175) {
  opacity: 0.5174;
  transform: translate(54.4753vw, -10px) scale(0.0104);
  animation: fall-175 25s -15s linear infinite;
}
@keyframes fall-175 {
  50.838% {
    transform: translate(53.651vw, 50.838vh) scale(0.0104);
  }
  to {
    transform: translate(54.06315vw, 100vh) scale(0.0104);
  }
}
.snow:nth-child(176) {
  opacity: 0.9446;
  transform: translate(28.474vw, -10px) scale(0.8525);
  animation: fall-176 11s -29s linear infinite;
}
@keyframes fall-176 {
  30.377% {
    transform: translate(25.4911vw, 30.377vh) scale(0.8525);
  }
  to {
    transform: translate(26.98255vw, 100vh) scale(0.8525);
  }
}
.snow:nth-child(177) {
  opacity: 0.6722;
  transform: translate(65.9253vw, -10px) scale(0.8138);
  animation: fall-177 11s -29s linear infinite;
}
@keyframes fall-177 {
  55.93% {
    transform: translate(73.4647vw, 55.93vh) scale(0.8138);
  }
  to {
    transform: translate(69.695vw, 100vh) scale(0.8138);
  }
}
.snow:nth-child(178) {
  opacity: 0.1432;
  transform: translate(48.7089vw, -10px) scale(0.9989);
  animation: fall-178 23s -29s linear infinite;
}
@keyframes fall-178 {
  55.902% {
    transform: translate(51.0667vw, 55.902vh) scale(0.9989);
  }
  to {
    transform: translate(49.8878vw, 100vh) scale(0.9989);
  }
}
.snow:nth-child(179) {
  opacity: 0.6954;
  transform: translate(54.6581vw, -10px) scale(0.2006);
  animation: fall-179 28s -17s linear infinite;
}
@keyframes fall-179 {
  52.973% {
    transform: translate(55.4491vw, 52.973vh) scale(0.2006);
  }
  to {
    transform: translate(55.0536vw, 100vh) scale(0.2006);
  }
}
.snow:nth-child(180) {
  opacity: 0.2578;
  transform: translate(68.4196vw, -10px) scale(0.1026);
  animation: fall-180 10s -21s linear infinite;
}
@keyframes fall-180 {
  52.238% {
    transform: translate(63.6691vw, 52.238vh) scale(0.1026);
  }
  to {
    transform: translate(66.04435vw, 100vh) scale(0.1026);
  }
}
.snow:nth-child(181) {
  opacity: 0.3252;
  transform: translate(79.4084vw, -10px) scale(0.1853);
  animation: fall-181 18s -26s linear infinite;
}
@keyframes fall-181 {
  49.243% {
    transform: translate(70.7133vw, 49.243vh) scale(0.1853);
  }
  to {
    transform: translate(75.06085vw, 100vh) scale(0.1853);
  }
}
.snow:nth-child(182) {
  opacity: 0.9373;
  transform: translate(69.8867vw, -10px) scale(0.4873);
  animation: fall-182 24s -13s linear infinite;
}
@keyframes fall-182 {
  34.346% {
    transform: translate(68.6902vw, 34.346vh) scale(0.4873);
  }
  to {
    transform: translate(69.28845vw, 100vh) scale(0.4873);
  }
}
.snow:nth-child(183) {
  opacity: 0.4176;
  transform: translate(42.1554vw, -10px) scale(0.2237);
  animation: fall-183 26s -27s linear infinite;
}
@keyframes fall-183 {
  73.599% {
    transform: translate(35.6031vw, 73.599vh) scale(0.2237);
  }
  to {
    transform: translate(38.87925vw, 100vh) scale(0.2237);
  }
}
.snow:nth-child(184) {
  opacity: 0.8392;
  transform: translate(31.3148vw, -10px) scale(0.064);
  animation: fall-184 27s -15s linear infinite;
}
@keyframes fall-184 {
  56.315% {
    transform: translate(21.8006vw, 56.315vh) scale(0.064);
  }
  to {
    transform: translate(26.5577vw, 100vh) scale(0.064);
  }
}
.snow:nth-child(185) {
  opacity: 0.05;
  transform: translate(9.1604vw, -10px) scale(0.6118);
  animation: fall-185 22s -11s linear infinite;
}
@keyframes fall-185 {
  66.27% {
    transform: translate(14.4647vw, 66.27vh) scale(0.6118);
  }
  to {
    transform: translate(11.81255vw, 100vh) scale(0.6118);
  }
}
.snow:nth-child(186) {
  opacity: 0.7311;
  transform: translate(24.509vw, -10px) scale(0.8719);
  animation: fall-186 25s -16s linear infinite;
}
@keyframes fall-186 {
  45.359% {
    transform: translate(30.7502vw, 45.359vh) scale(0.8719);
  }
  to {
    transform: translate(27.6296vw, 100vh) scale(0.8719);
  }
}
.snow:nth-child(187) {
  opacity: 0.2616;
  transform: translate(46.0705vw, -10px) scale(0.3751);
  animation: fall-187 23s -7s linear infinite;
}
@keyframes fall-187 {
  50.111% {
    transform: translate(44.8463vw, 50.111vh) scale(0.3751);
  }
  to {
    transform: translate(45.4584vw, 100vh) scale(0.3751);
  }
}
.snow:nth-child(188) {
  opacity: 0.5479;
  transform: translate(54.4963vw, -10px) scale(0.1381);
  animation: fall-188 16s -8s linear infinite;
}
@keyframes fall-188 {
  71.235% {
    transform: translate(62.2429vw, 71.235vh) scale(0.1381);
  }
  to {
    transform: translate(58.3696vw, 100vh) scale(0.1381);
  }
}
.snow:nth-child(189) {
  opacity: 0.1987;
  transform: translate(84.4379vw, -10px) scale(0.5081);
  animation: fall-189 19s -6s linear infinite;
}
@keyframes fall-189 {
  73.458% {
    transform: translate(81.641vw, 73.458vh) scale(0.5081);
  }
  to {
    transform: translate(83.03945vw, 100vh) scale(0.5081);
  }
}
.snow:nth-child(190) {
  opacity: 0.7817;
  transform: translate(16.8731vw, -10px) scale(0.4017);
  animation: fall-190 10s -24s linear infinite;
}
@keyframes fall-190 {
  64.424% {
    transform: translate(22.4991vw, 64.424vh) scale(0.4017);
  }
  to {
    transform: translate(19.6861vw, 100vh) scale(0.4017);
  }
}
.snow:nth-child(191) {
  opacity: 0.8966;
  transform: translate(4.8332vw, -10px) scale(0.0361);
  animation: fall-191 20s -7s linear infinite;
}
@keyframes fall-191 {
  50.719% {
    transform: translate(14.4595vw, 50.719vh) scale(0.0361);
  }
  to {
    transform: translate(9.64635vw, 100vh) scale(0.0361);
  }
}
.snow:nth-child(192) {
  opacity: 0.1797;
  transform: translate(15.8729vw, -10px) scale(0.0129);
  animation: fall-192 23s -27s linear infinite;
}
@keyframes fall-192 {
  59.652% {
    transform: translate(23.0173vw, 59.652vh) scale(0.0129);
  }
  to {
    transform: translate(19.4451vw, 100vh) scale(0.0129);
  }
}
.snow:nth-child(193) {
  opacity: 0.7253;
  transform: translate(74.1884vw, -10px) scale(0.5014);
  animation: fall-193 21s -3s linear infinite;
}
@keyframes fall-193 {
  33.305% {
    transform: translate(83.1587vw, 33.305vh) scale(0.5014);
  }
  to {
    transform: translate(78.67355vw, 100vh) scale(0.5014);
  }
}
.snow:nth-child(194) {
  opacity: 0.1664;
  transform: translate(81.3332vw, -10px) scale(0.1626);
  animation: fall-194 21s -5s linear infinite;
}
@keyframes fall-194 {
  45.041% {
    transform: translate(77.4973vw, 45.041vh) scale(0.1626);
  }
  to {
    transform: translate(79.41525vw, 100vh) scale(0.1626);
  }
}
.snow:nth-child(195) {
  opacity: 0.9722;
  transform: translate(50.1458vw, -10px) scale(0.0297);
  animation: fall-195 16s -23s linear infinite;
}
@keyframes fall-195 {
  62.343% {
    transform: translate(44.9919vw, 62.343vh) scale(0.0297);
  }
  to {
    transform: translate(47.56885vw, 100vh) scale(0.0297);
  }
}
.snow:nth-child(196) {
  opacity: 0.3348;
  transform: translate(15.882vw, -10px) scale(0.7074);
  animation: fall-196 26s -19s linear infinite;
}
@keyframes fall-196 {
  52.475% {
    transform: translate(23.5438vw, 52.475vh) scale(0.7074);
  }
  to {
    transform: translate(19.7129vw, 100vh) scale(0.7074);
  }
}
.snow:nth-child(197) {
  opacity: 0.9187;
  transform: translate(23.9724vw, -10px) scale(0.9517);
  animation: fall-197 18s -8s linear infinite;
}
@keyframes fall-197 {
  79.483% {
    transform: translate(28.7013vw, 79.483vh) scale(0.9517);
  }
  to {
    transform: translate(26.33685vw, 100vh) scale(0.9517);
  }
}
.snow:nth-child(198) {
  opacity: 0.1931;
  transform: translate(47.7711vw, -10px) scale(0.6457);
  animation: fall-198 17s -17s linear infinite;
}
@keyframes fall-198 {
  60.331% {
    transform: translate(54.5966vw, 60.331vh) scale(0.6457);
  }
  to {
    transform: translate(51.18385vw, 100vh) scale(0.6457);
  }
}
.snow:nth-child(199) {
  opacity: 0.3429;
  transform: translate(34.663vw, -10px) scale(0.9474);
  animation: fall-199 13s -7s linear infinite;
}
@keyframes fall-199 {
  43.173% {
    transform: translate(40.3993vw, 43.173vh) scale(0.9474);
  }
  to {
    transform: translate(37.53115vw, 100vh) scale(0.9474);
  }
}
.snow:nth-child(200) {
  opacity: 0.2922;
  transform: translate(73.841vw, -10px) scale(0.9387);
  animation: fall-200 14s -27s linear infinite;
}
@keyframes fall-200 {
  74.85% {
    transform: translate(72.0163vw, 74.85vh) scale(0.9387);
  }
  to {
    transform: translate(72.92865vw, 100vh) scale(0.9387);
  }
}
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

To Do List by Pure CSS  (0) 2022.06.05
Add To Cart Animation  (0) 2022.06.03
CSS Background Animation Effects  (0) 2022.05.30
RANGE SLIDER  (0) 2022.05.29
Isometric Cards  (0) 2022.05.28
'HTML _CSS' Related Articles more