250x250
Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 |
Tags
- iOS 개발자
- html5
- MAC
- SWIFT
- Animation
- 프론트엔드
- php
- button
- 비전공 개발자
- 비전공자
- xcode
- iPhone
- HTML
- javascript
- image
- front-end
- react
- CSS
- 풀스택
- jQuery
- 백엔드
- ipad
- keyframes
- hover
- 개발자
- effect
- 애니메이션
- css3
- IOS
- 자바스크립트
Archives
- Today
- Total
비전공자 개발일기
Snow Animation 본문
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>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
