This HTML and CSS code snippet creates a captivating falling snow effect on a webpage. It utilizes CSS and HTML to simulate falling snowflakes. Each snowflake is positioned randomly and animated to drift down the screen, lending a delightful winter ambiance to your webpage. It’s a fun and visually appealing feature to enhance your website’s appearance.
How to Create Falling Snow Effect Using HTML and CSS
1. Begin by creating a basic HTML structure for your webpage. Place the following code within the <body> tags of your HTML file:
<div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <div class="snow"></div>
These <div> elements represent the snowflakes that will fall on your webpage. You can add more or fewer divs as needed.
2. Now, let’s style your snowflakes and set up the background. Add the following CSS code to your HTML file within a <style> or an external stylesheet:
body {
height: 100vh;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%) !important;
overflow: hidden;
position: relative;
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.1037;
transform: translate(0.4053vw, -10px) scale(0.4176);
animation: fall-1 23s -26s linear infinite;
}
@keyframes fall-1 {
59.437% {
transform: translate(-8.0098vw, 59.437vh) scale(0.4176);
}
to {
transform: translate(-3.80225vw, 100vh) scale(0.4176);
}
}
.snow:nth-child(2) {
opacity: 0.1597;
transform: translate(17.1012vw, -10px) scale(0.9029);
animation: fall-2 15s -15s linear infinite;
}
@keyframes fall-2 {
47.917% {
transform: translate(17.9224vw, 47.917vh) scale(0.9029);
}
to {
transform: translate(17.5118vw, 100vh) scale(0.9029);
}
}
.snow:nth-child(3) {
opacity: 0.5103;
transform: translate(59.2196vw, -10px) scale(0.1384);
animation: fall-3 20s -14s linear infinite;
}
@keyframes fall-3 {
32.868% {
transform: translate(60.9261vw, 32.868vh) scale(0.1384);
}
to {
transform: translate(60.07285vw, 100vh) scale(0.1384);
}
}
.snow:nth-child(4) {
opacity: 0.3232;
transform: translate(5.9416vw, -10px) scale(0.3733);
animation: fall-4 15s -19s linear infinite;
}
@keyframes fall-4 {
58.653% {
transform: translate(0.4741vw, 58.653vh) scale(0.3733);
}
to {
transform: translate(3.20785vw, 100vh) scale(0.3733);
}
}
.snow:nth-child(5) {
opacity: 0.2686;
transform: translate(74.526vw, -10px) scale(0.9253);
animation: fall-5 15s -19s linear infinite;
}
@keyframes fall-5 {
74.959% {
transform: translate(66.6605vw, 74.959vh) scale(0.9253);
}
to {
transform: translate(70.59325vw, 100vh) scale(0.9253);
}
}
.snow:nth-child(6) {
opacity: 0.7515;
transform: translate(95.817vw, -10px) scale(0.2357);
animation: fall-6 20s -3s linear infinite;
}
@keyframes fall-6 {
34.722% {
transform: translate(96.2691vw, 34.722vh) scale(0.2357);
}
to {
transform: translate(96.04305vw, 100vh) scale(0.2357);
}
}
.snow:nth-child(7) {
opacity: 0.6281;
transform: translate(62.1456vw, -10px) scale(0.7676);
animation: fall-7 23s -29s linear infinite;
}
@keyframes fall-7 {
75.129% {
transform: translate(69.0938vw, 75.129vh) scale(0.7676);
}
to {
transform: translate(65.6197vw, 100vh) scale(0.7676);
}
}
.snow:nth-child(8) {
opacity: 0.4464;
transform: translate(54.055vw, -10px) scale(0.7214);
animation: fall-8 27s -21s linear infinite;
}
@keyframes fall-8 {
62.823% {
transform: translate(62.2956vw, 62.823vh) scale(0.7214);
}
to {
transform: translate(58.1753vw, 100vh) scale(0.7214);
}
}
.snow:nth-child(9) {
opacity: 0.2268;
transform: translate(93.913vw, -10px) scale(0.0275);
animation: fall-9 29s -9s linear infinite;
}
@keyframes fall-9 {
42.693% {
transform: translate(99.707vw, 42.693vh) scale(0.0275);
}
to {
transform: translate(96.81vw, 100vh) scale(0.0275);
}
}
.snow:nth-child(10) {
opacity: 0.2196;
transform: translate(35.907vw, -10px) scale(0.4371);
animation: fall-10 12s -7s linear infinite;
}
@keyframes fall-10 {
69.911% {
transform: translate(30.1657vw, 69.911vh) scale(0.4371);
}
to {
transform: translate(33.03635vw, 100vh) scale(0.4371);
}
}
.snow:nth-child(11) {
opacity: 0.8203;
transform: translate(91.4987vw, -10px) scale(0.6173);
animation: fall-11 10s -9s linear infinite;
}
@keyframes fall-11 {
66.971% {
transform: translate(89.0926vw, 66.971vh) scale(0.6173);
}
to {
transform: translate(90.29565vw, 100vh) scale(0.6173);
}
}
.snow:nth-child(12) {
opacity: 0.6819;
transform: translate(86.013vw, -10px) scale(0.321);
animation: fall-12 10s -3s linear infinite;
}
@keyframes fall-12 {
34.233% {
transform: translate(91.9681vw, 34.233vh) scale(0.321);
}
to {
transform: translate(88.99055vw, 100vh) scale(0.321);
}
}
.snow:nth-child(13) {
opacity: 0.5956;
transform: translate(70.6814vw, -10px) scale(0.0646);
animation: fall-13 18s -9s linear infinite;
}
@keyframes fall-13 {
48.327% {
transform: translate(71.7507vw, 48.327vh) scale(0.0646);
}
to {
transform: translate(71.21605vw, 100vh) scale(0.0646);
}
}
.snow:nth-child(14) {
opacity: 0.3065;
transform: translate(24.9917vw, -10px) scale(0.9972);
animation: fall-14 22s -27s linear infinite;
}
@keyframes fall-14 {
32.232% {
transform: translate(28.5147vw, 32.232vh) scale(0.9972);
}
to {
transform: translate(26.7532vw, 100vh) scale(0.9972);
}
}
.snow:nth-child(15) {
opacity: 0.5137;
transform: translate(19.2265vw, -10px) scale(0.5798);
animation: fall-15 15s -28s linear infinite;
}
@keyframes fall-15 {
30.89% {
transform: translate(20.1927vw, 30.89vh) scale(0.5798);
}
to {
transform: translate(19.7096vw, 100vh) scale(0.5798);
}
}
.snow:nth-child(16) {
opacity: 0.2497;
transform: translate(43.5647vw, -10px) scale(0.0722);
animation: fall-16 26s -12s linear infinite;
}
@keyframes fall-16 {
56.297% {
transform: translate(50.0129vw, 56.297vh) scale(0.0722);
}
to {
transform: translate(46.7888vw, 100vh) scale(0.0722);
}
}
.snow:nth-child(17) {
opacity: 0.4208;
transform: translate(41.3183vw, -10px) scale(0.5402);
animation: fall-17 20s -8s linear infinite;
}
@keyframes fall-17 {
44.533% {
transform: translate(42.4813vw, 44.533vh) scale(0.5402);
}
to {
transform: translate(41.8998vw, 100vh) scale(0.5402);
}
}
.snow:nth-child(18) {
opacity: 0.3921;
transform: translate(57.8601vw, -10px) scale(0.9854);
animation: fall-18 28s -18s linear infinite;
}
@keyframes fall-18 {
52.451% {
transform: translate(57.1186vw, 52.451vh) scale(0.9854);
}
to {
transform: translate(57.48935vw, 100vh) scale(0.9854);
}
}
.snow:nth-child(19) {
opacity: 0.3027;
transform: translate(13.0701vw, -10px) scale(0.2851);
animation: fall-19 26s -20s linear infinite;
}
@keyframes fall-19 {
67.302% {
transform: translate(22.3622vw, 67.302vh) scale(0.2851);
}
to {
transform: translate(17.71615vw, 100vh) scale(0.2851);
}
}
.snow:nth-child(20) {
opacity: 0.8176;
transform: translate(6.5879vw, -10px) scale(0.5955);
animation: fall-20 15s -26s linear infinite;
}
@keyframes fall-20 {
34.316% {
transform: translate(14.8215vw, 34.316vh) scale(0.5955);
}
to {
transform: translate(10.7047vw, 100vh) scale(0.5955);
}
}
.snow:nth-child(21) {
opacity: 0.0359;
transform: translate(68.9212vw, -10px) scale(0.7013);
animation: fall-21 24s -5s linear infinite;
}
@keyframes fall-21 {
52.996% {
transform: translate(63.4786vw, 52.996vh) scale(0.7013);
}
to {
transform: translate(66.1999vw, 100vh) scale(0.7013);
}
}
.snow:nth-child(22) {
opacity: 0.7553;
transform: translate(81.7399vw, -10px) scale(0.816);
animation: fall-22 28s -12s linear infinite;
}
@keyframes fall-22 {
37.294% {
transform: translate(80.4026vw, 37.294vh) scale(0.816);
}
to {
transform: translate(81.07125vw, 100vh) scale(0.816);
}
}
.snow:nth-child(23) {
opacity: 0.7498;
transform: translate(5.6684vw, -10px) scale(0.1443);
animation: fall-23 15s -11s linear infinite;
}
@keyframes fall-23 {
61.725% {
transform: translate(8.5441vw, 61.725vh) scale(0.1443);
}
to {
transform: translate(7.10625vw, 100vh) scale(0.1443);
}
}
.snow:nth-child(24) {
opacity: 0.4179;
transform: translate(55.5826vw, -10px) scale(0.978);
animation: fall-24 11s -13s linear infinite;
}
@keyframes fall-24 {
56.349% {
transform: translate(45.6229vw, 56.349vh) scale(0.978);
}
to {
transform: translate(50.60275vw, 100vh) scale(0.978);
}
}
.snow:nth-child(25) {
opacity: 0.1383;
transform: translate(20.3576vw, -10px) scale(0.3204);
animation: fall-25 30s -19s linear infinite;
}
@keyframes fall-25 {
76.697% {
transform: translate(17.6723vw, 76.697vh) scale(0.3204);
}
to {
transform: translate(19.01495vw, 100vh) scale(0.3204);
}
}
.snow:nth-child(26) {
opacity: 0.754;
transform: translate(34.2416vw, -10px) scale(0.7519);
animation: fall-26 28s -28s linear infinite;
}
@keyframes fall-26 {
70.428% {
transform: translate(27.0612vw, 70.428vh) scale(0.7519);
}
to {
transform: translate(30.6514vw, 100vh) scale(0.7519);
}
}
.snow:nth-child(27) {
opacity: 0.5975;
transform: translate(4.9031vw, -10px) scale(0.655);
animation: fall-27 25s -8s linear infinite;
}
@keyframes fall-27 {
44.294% {
transform: translate(9.807vw, 44.294vh) scale(0.655);
}
to {
transform: translate(7.35505vw, 100vh) scale(0.655);
}
}
.snow:nth-child(28) {
opacity: 0.9822;
transform: translate(27.0694vw, -10px) scale(0.8916);
animation: fall-28 22s -24s linear infinite;
}
@keyframes fall-28 {
46.298% {
transform: translate(33.5738vw, 46.298vh) scale(0.8916);
}
to {
transform: translate(30.3216vw, 100vh) scale(0.8916);
}
}
.snow:nth-child(29) {
opacity: 0.5457;
transform: translate(0.5679vw, -10px) scale(0.1033);
animation: fall-29 30s -25s linear infinite;
}
@keyframes fall-29 {
60.474% {
transform: translate(2.3608vw, 60.474vh) scale(0.1033);
}
to {
transform: translate(1.46435vw, 100vh) scale(0.1033);
}
}
.snow:nth-child(30) {
opacity: 0.4321;
transform: translate(95.1968vw, -10px) scale(0.3591);
animation: fall-30 16s -8s linear infinite;
}
@keyframes fall-30 {
66.211% {
transform: translate(91.7423vw, 66.211vh) scale(0.3591);
}
to {
transform: translate(93.46955vw, 100vh) scale(0.3591);
}
}
.snow:nth-child(31) {
opacity: 0.6376;
transform: translate(67.7211vw, -10px) scale(0.8379);
animation: fall-31 16s -17s linear infinite;
}
@keyframes fall-31 {
55.582% {
transform: translate(68.8493vw, 55.582vh) scale(0.8379);
}
to {
transform: translate(68.2852vw, 100vh) scale(0.8379);
}
}
.snow:nth-child(32) {
opacity: 0.0984;
transform: translate(52.1051vw, -10px) scale(0.7419);
animation: fall-32 29s -2s linear infinite;
}
@keyframes fall-32 {
32.3% {
transform: translate(60.5232vw, 32.3vh) scale(0.7419);
}
to {
transform: translate(56.31415vw, 100vh) scale(0.7419);
}
}
.snow:nth-child(33) {
opacity: 0.7582;
transform: translate(73.1309vw, -10px) scale(0.726);
animation: fall-33 13s -17s linear infinite;
}
@keyframes fall-33 {
41.242% {
transform: translate(77.5695vw, 41.242vh) scale(0.726);
}
to {
transform: translate(75.3502vw, 100vh) scale(0.726);
}
}
.snow:nth-child(34) {
opacity: 0.9349;
transform: translate(46.2347vw, -10px) scale(0.5496);
animation: fall-34 14s -7s linear infinite;
}
@keyframes fall-34 {
40.423% {
transform: translate(55.5472vw, 40.423vh) scale(0.5496);
}
to {
transform: translate(50.89095vw, 100vh) scale(0.5496);
}
}
.snow:nth-child(35) {
opacity: 0.0044;
transform: translate(91.48vw, -10px) scale(0.4057);
animation: fall-35 27s -7s linear infinite;
}
@keyframes fall-35 {
30.07% {
transform: translate(95.4718vw, 30.07vh) scale(0.4057);
}
to {
transform: translate(93.4759vw, 100vh) scale(0.4057);
}
}
.snow:nth-child(36) {
opacity: 0.1706;
transform: translate(93.6779vw, -10px) scale(0.0046);
animation: fall-36 16s -8s linear infinite;
}
@keyframes fall-36 {
42.232% {
transform: translate(95.3173vw, 42.232vh) scale(0.0046);
}
to {
transform: translate(94.4976vw, 100vh) scale(0.0046);
}
}
.snow:nth-child(37) {
opacity: 0.44;
transform: translate(43.4072vw, -10px) scale(0.1135);
animation: fall-37 29s -16s linear infinite;
}
@keyframes fall-37 {
77.762% {
transform: translate(42.6897vw, 77.762vh) scale(0.1135);
}
to {
transform: translate(43.04845vw, 100vh) scale(0.1135);
}
}
.snow:nth-child(38) {
opacity: 0.1418;
transform: translate(2.7045vw, -10px) scale(0.1923);
animation: fall-38 16s -13s linear infinite;
}
@keyframes fall-38 {
73.561% {
transform: translate(-5.4678vw, 73.561vh) scale(0.1923);
}
to {
transform: translate(-1.38165vw, 100vh) scale(0.1923);
}
}
.snow:nth-child(39) {
opacity: 0.1997;
transform: translate(38.1363vw, -10px) scale(0.724);
animation: fall-39 19s -11s linear infinite;
}
@keyframes fall-39 {
70.539% {
transform: translate(40.0784vw, 70.539vh) scale(0.724);
}
to {
transform: translate(39.10735vw, 100vh) scale(0.724);
}
}
.snow:nth-child(40) {
opacity: 0.3986;
transform: translate(40.205vw, -10px) scale(0.1945);
animation: fall-40 15s -9s linear infinite;
}
@keyframes fall-40 {
60.193% {
transform: translate(41.4719vw, 60.193vh) scale(0.1945);
}
to {
transform: translate(40.83845vw, 100vh) scale(0.1945);
}
}
.snow:nth-child(41) {
opacity: 0.7875;
transform: translate(32.8149vw, -10px) scale(0.8881);
animation: fall-41 11s -24s linear infinite;
}
@keyframes fall-41 {
79.272% {
transform: translate(23.7982vw, 79.272vh) scale(0.8881);
}
to {
transform: translate(28.30655vw, 100vh) scale(0.8881);
}
}
.snow:nth-child(42) {
opacity: 0.4322;
transform: translate(1.8899vw, -10px) scale(0.6933);
animation: fall-42 25s -3s linear infinite;
}
@keyframes fall-42 {
35.429% {
transform: translate(9.4699vw, 35.429vh) scale(0.6933);
}
to {
transform: translate(5.6799vw, 100vh) scale(0.6933);
}
}
.snow:nth-child(43) {
opacity: 0.9534;
transform: translate(61.5479vw, -10px) scale(0.8783);
animation: fall-43 17s -10s linear infinite;
}
@keyframes fall-43 {
49.53% {
transform: translate(55.7373vw, 49.53vh) scale(0.8783);
}
to {
transform: translate(58.6426vw, 100vh) scale(0.8783);
}
}
.snow:nth-child(44) {
opacity: 0.0535;
transform: translate(63.8409vw, -10px) scale(0.1769);
animation: fall-44 27s -29s linear infinite;
}
@keyframes fall-44 {
60.792% {
transform: translate(63.3758vw, 60.792vh) scale(0.1769);
}
to {
transform: translate(63.60835vw, 100vh) scale(0.1769);
}
}
.snow:nth-child(45) {
opacity: 0.6616;
transform: translate(86.6574vw, -10px) scale(0.4801);
animation: fall-45 27s -19s linear infinite;
}
@keyframes fall-45 {
64.664% {
transform: translate(86.936vw, 64.664vh) scale(0.4801);
}
to {
transform: translate(86.7967vw, 100vh) scale(0.4801);
}
}
.snow:nth-child(46) {
opacity: 0.4484;
transform: translate(38.6286vw, -10px) scale(0.2868);
animation: fall-46 11s -28s linear infinite;
}
@keyframes fall-46 {
39.7% {
transform: translate(31.9862vw, 39.7vh) scale(0.2868);
}
to {
transform: translate(35.3074vw, 100vh) scale(0.2868);
}
}
.snow:nth-child(47) {
opacity: 0.8196;
transform: translate(51.2231vw, -10px) scale(0.3736);
animation: fall-47 30s -20s linear infinite;
}
@keyframes fall-47 {
67.712% {
transform: translate(48.3246vw, 67.712vh) scale(0.3736);
}
to {
transform: translate(49.77385vw, 100vh) scale(0.3736);
}
}
.snow:nth-child(48) {
opacity: 0.2515;
transform: translate(75.4142vw, -10px) scale(0.1474);
animation: fall-48 24s -19s linear infinite;
}
@keyframes fall-48 {
35.46% {
transform: translate(76.0351vw, 35.46vh) scale(0.1474);
}
to {
transform: translate(75.72465vw, 100vh) scale(0.1474);
}
}
.snow:nth-child(49) {
opacity: 0.6275;
transform: translate(23.5737vw, -10px) scale(0.7263);
animation: fall-49 19s -19s linear infinite;
}
@keyframes fall-49 {
50.601% {
transform: translate(28.352vw, 50.601vh) scale(0.7263);
}
to {
transform: translate(25.96285vw, 100vh) scale(0.7263);
}
}
.snow:nth-child(50) {
opacity: 0.317;
transform: translate(97.6734vw, -10px) scale(0.0573);
animation: fall-50 17s -9s linear infinite;
}
@keyframes fall-50 {
78.136% {
transform: translate(103.962vw, 78.136vh) scale(0.0573);
}
to {
transform: translate(100.8177vw, 100vh) scale(0.0573);
}
}
.snow:nth-child(51) {
opacity: 0.9002;
transform: translate(88.7924vw, -10px) scale(0.2197);
animation: fall-51 24s -3s linear infinite;
}
@keyframes fall-51 {
71.13% {
transform: translate(97.1308vw, 71.13vh) scale(0.2197);
}
to {
transform: translate(92.9616vw, 100vh) scale(0.2197);
}
}
.snow:nth-child(52) {
opacity: 0.4006;
transform: translate(95.3725vw, -10px) scale(0.1736);
animation: fall-52 12s -3s linear infinite;
}
@keyframes fall-52 {
49.35% {
transform: translate(99.1712vw, 49.35vh) scale(0.1736);
}
to {
transform: translate(97.27185vw, 100vh) scale(0.1736);
}
}
.snow:nth-child(53) {
opacity: 0.0516;
transform: translate(57.2303vw, -10px) scale(0.4046);
animation: fall-53 16s -30s linear infinite;
}
@keyframes fall-53 {
42.885% {
transform: translate(56.9314vw, 42.885vh) scale(0.4046);
}
to {
transform: translate(57.08085vw, 100vh) scale(0.4046);
}
}
.snow:nth-child(54) {
opacity: 0.4821;
transform: translate(68.2874vw, -10px) scale(0.0998);
animation: fall-54 20s -20s linear infinite;
}
@keyframes fall-54 {
46.952% {
transform: translate(66.9078vw, 46.952vh) scale(0.0998);
}
to {
transform: translate(67.5976vw, 100vh) scale(0.0998);
}
}
.snow:nth-child(55) {
opacity: 0.4535;
transform: translate(40.5209vw, -10px) scale(0.6468);
animation: fall-55 25s -10s linear infinite;
}
@keyframes fall-55 {
79.86% {
transform: translate(36.1579vw, 79.86vh) scale(0.6468);
}
to {
transform: translate(38.3394vw, 100vh) scale(0.6468);
}
}
.snow:nth-child(56) {
opacity: 0.7554;
transform: translate(65.2049vw, -10px) scale(0.8241);
animation: fall-56 13s -20s linear infinite;
}
@keyframes fall-56 {
47.793% {
transform: translate(66.3902vw, 47.793vh) scale(0.8241);
}
to {
transform: translate(65.79755vw, 100vh) scale(0.8241);
}
}
.snow:nth-child(57) {
opacity: 0.0078;
transform: translate(49.8944vw, -10px) scale(0.8996);
animation: fall-57 10s -11s linear infinite;
}
@keyframes fall-57 {
55.771% {
transform: translate(54.2838vw, 55.771vh) scale(0.8996);
}
to {
transform: translate(52.0891vw, 100vh) scale(0.8996);
}
}
.snow:nth-child(58) {
opacity: 0.7727;
transform: translate(30.6421vw, -10px) scale(0.6308);
animation: fall-58 29s -20s linear infinite;
}
@keyframes fall-58 {
43.249% {
transform: translate(34.6189vw, 43.249vh) scale(0.6308);
}
to {
transform: translate(32.6305vw, 100vh) scale(0.6308);
}
}
.snow:nth-child(59) {
opacity: 0.3809;
transform: translate(64.3653vw, -10px) scale(0.4891);
animation: fall-59 10s -25s linear infinite;
}
@keyframes fall-59 {
45.25% {
transform: translate(61.5551vw, 45.25vh) scale(0.4891);
}
to {
transform: translate(62.9602vw, 100vh) scale(0.4891);
}
}
.snow:nth-child(60) {
opacity: 0.9078;
transform: translate(22.1082vw, -10px) scale(0.1965);
animation: fall-60 23s -18s linear infinite;
}
@keyframes fall-60 {
61.246% {
transform: translate(22.2114vw, 61.246vh) scale(0.1965);
}
to {
transform: translate(22.1598vw, 100vh) scale(0.1965);
}
}
.snow:nth-child(61) {
opacity: 0.6856;
transform: translate(29.3827vw, -10px) scale(0.3137);
animation: fall-61 20s -25s linear infinite;
}
@keyframes fall-61 {
58.826% {
transform: translate(33.666vw, 58.826vh) scale(0.3137);
}
to {
transform: translate(31.52435vw, 100vh) scale(0.3137);
}
}
.snow:nth-child(62) {
opacity: 0.4308;
transform: translate(95.1313vw, -10px) scale(0.8267);
animation: fall-62 29s -17s linear infinite;
}
@keyframes fall-62 {
43.359% {
transform: translate(97.4225vw, 43.359vh) scale(0.8267);
}
to {
transform: translate(96.2769vw, 100vh) scale(0.8267);
}
}
.snow:nth-child(63) {
opacity: 0.5005;
transform: translate(96.3336vw, -10px) scale(0.5937);
animation: fall-63 20s -21s linear infinite;
}
@keyframes fall-63 {
43.277% {
transform: translate(104.6974vw, 43.277vh) scale(0.5937);
}
to {
transform: translate(100.5155vw, 100vh) scale(0.5937);
}
}
.snow:nth-child(64) {
opacity: 0.5662;
transform: translate(57.1474vw, -10px) scale(0.1251);
animation: fall-64 13s -23s linear infinite;
}
@keyframes fall-64 {
77.143% {
transform: translate(64.9447vw, 77.143vh) scale(0.1251);
}
to {
transform: translate(61.04605vw, 100vh) scale(0.1251);
}
}
.snow:nth-child(65) {
opacity: 0.9778;
transform: translate(93.2659vw, -10px) scale(0.1824);
animation: fall-65 30s -25s linear infinite;
}
@keyframes fall-65 {
54.392% {
transform: translate(92.5433vw, 54.392vh) scale(0.1824);
}
to {
transform: translate(92.9046vw, 100vh) scale(0.1824);
}
}
.snow:nth-child(66) {
opacity: 0.2741;
transform: translate(97.0446vw, -10px) scale(0.6734);
animation: fall-66 18s -1s linear infinite;
}
@keyframes fall-66 {
32.265% {
transform: translate(103.1326vw, 32.265vh) scale(0.6734);
}
to {
transform: translate(100.0886vw, 100vh) scale(0.6734);
}
}
.snow:nth-child(67) {
opacity: 0.3754;
transform: translate(70.6853vw, -10px) scale(0.174);
animation: fall-67 15s -2s linear infinite;
}
@keyframes fall-67 {
42.57% {
transform: translate(68.9131vw, 42.57vh) scale(0.174);
}
to {
transform: translate(69.7992vw, 100vh) scale(0.174);
}
}
.snow:nth-child(68) {
opacity: 0.4322;
transform: translate(86.9555vw, -10px) scale(0.2717);
animation: fall-68 30s -25s linear infinite;
}
@keyframes fall-68 {
73.015% {
transform: translate(85.1239vw, 73.015vh) scale(0.2717);
}
to {
transform: translate(86.0397vw, 100vh) scale(0.2717);
}
}
.snow:nth-child(69) {
opacity: 0.6263;
transform: translate(86.7696vw, -10px) scale(0.5256);
animation: fall-69 30s -18s linear infinite;
}
@keyframes fall-69 {
57.576% {
transform: translate(84.9638vw, 57.576vh) scale(0.5256);
}
to {
transform: translate(85.8667vw, 100vh) scale(0.5256);
}
}
.snow:nth-child(70) {
opacity: 0.5643;
transform: translate(59.353vw, -10px) scale(0.4958);
animation: fall-70 15s -23s linear infinite;
}
@keyframes fall-70 {
43.225% {
transform: translate(63.0473vw, 43.225vh) scale(0.4958);
}
to {
transform: translate(61.20015vw, 100vh) scale(0.4958);
}
}
.snow:nth-child(71) {
opacity: 0.3074;
transform: translate(80.9264vw, -10px) scale(0.0857);
animation: fall-71 24s -15s linear infinite;
}
@keyframes fall-71 {
75% {
transform: translate(83.5429vw, 75vh) scale(0.0857);
}
to {
transform: translate(82.23465vw, 100vh) scale(0.0857);
}
}
.snow:nth-child(72) {
opacity: 0.8046;
transform: translate(84.3612vw, -10px) scale(0.0292);
animation: fall-72 22s -10s linear infinite;
}
@keyframes fall-72 {
67.03% {
transform: translate(80.0327vw, 67.03vh) scale(0.0292);
}
to {
transform: translate(82.19695vw, 100vh) scale(0.0292);
}
}
.snow:nth-child(73) {
opacity: 0.7553;
transform: translate(73.7004vw, -10px) scale(0.112);
animation: fall-73 25s -26s linear infinite;
}
@keyframes fall-73 {
57.02% {
transform: translate(69.5712vw, 57.02vh) scale(0.112);
}
to {
transform: translate(71.6358vw, 100vh) scale(0.112);
}
}
.snow:nth-child(74) {
opacity: 0.8841;
transform: translate(78.2655vw, -10px) scale(0.3292);
animation: fall-74 14s -26s linear infinite;
}
@keyframes fall-74 {
63.717% {
transform: translate(75.533vw, 63.717vh) scale(0.3292);
}
to {
transform: translate(76.89925vw, 100vh) scale(0.3292);
}
}
.snow:nth-child(75) {
opacity: 0.3821;
transform: translate(66.5837vw, -10px) scale(0.6016);
animation: fall-75 17s -1s linear infinite;
}
@keyframes fall-75 {
51.974% {
transform: translate(73.5002vw, 51.974vh) scale(0.6016);
}
to {
transform: translate(70.04195vw, 100vh) scale(0.6016);
}
}
.snow:nth-child(76) {
opacity: 0.5698;
transform: translate(21.4139vw, -10px) scale(0.0443);
animation: fall-76 24s -2s linear infinite;
}
@keyframes fall-76 {
39.554% {
transform: translate(27.7419vw, 39.554vh) scale(0.0443);
}
to {
transform: translate(24.5779vw, 100vh) scale(0.0443);
}
}
.snow:nth-child(77) {
opacity: 0.5948;
transform: translate(19.4667vw, -10px) scale(0.4262);
animation: fall-77 25s -20s linear infinite;
}
@keyframes fall-77 {
62.009% {
transform: translate(20.7473vw, 62.009vh) scale(0.4262);
}
to {
transform: translate(20.107vw, 100vh) scale(0.4262);
}
}
.snow:nth-child(78) {
opacity: 0.1999;
transform: translate(79.6334vw, -10px) scale(0.3168);
animation: fall-78 20s -12s linear infinite;
}
@keyframes fall-78 {
62.891% {
transform: translate(87.4172vw, 62.891vh) scale(0.3168);
}
to {
transform: translate(83.5253vw, 100vh) scale(0.3168);
}
}
.snow:nth-child(79) {
opacity: 0.6268;
transform: translate(80.5839vw, -10px) scale(0.8408);
animation: fall-79 26s -6s linear infinite;
}
@keyframes fall-79 {
56.085% {
transform: translate(73.8713vw, 56.085vh) scale(0.8408);
}
to {
transform: translate(77.2276vw, 100vh) scale(0.8408);
}
}
.snow:nth-child(80) {
opacity: 0.7677;
transform: translate(93.1851vw, -10px) scale(0.074);
animation: fall-80 30s -29s linear infinite;
}
@keyframes fall-80 {
32.544% {
transform: translate(101.2572vw, 32.544vh) scale(0.074);
}
to {
transform: translate(97.22115vw, 100vh) scale(0.074);
}
}
.snow:nth-child(81) {
opacity: 0.2099;
transform: translate(90.018vw, -10px) scale(0.3443);
animation: fall-81 21s -19s linear infinite;
}
@keyframes fall-81 {
34.342% {
transform: translate(99.8779vw, 34.342vh) scale(0.3443);
}
to {
transform: translate(94.94795vw, 100vh) scale(0.3443);
}
}
.snow:nth-child(82) {
opacity: 0.4251;
transform: translate(9.1823vw, -10px) scale(0.1683);
animation: fall-82 13s -26s linear infinite;
}
@keyframes fall-82 {
74.718% {
transform: translate(-0.1865vw, 74.718vh) scale(0.1683);
}
to {
transform: translate(4.4979vw, 100vh) scale(0.1683);
}
}
.snow:nth-child(83) {
opacity: 0.4414;
transform: translate(45.1542vw, -10px) scale(0.8171);
animation: fall-83 21s -27s linear infinite;
}
@keyframes fall-83 {
72.273% {
transform: translate(50.691vw, 72.273vh) scale(0.8171);
}
to {
transform: translate(47.9226vw, 100vh) scale(0.8171);
}
}
.snow:nth-child(84) {
opacity: 0.1472;
transform: translate(22.5433vw, -10px) scale(0.3434);
animation: fall-84 24s -12s linear infinite;
}
@keyframes fall-84 {
44.496% {
transform: translate(21.8523vw, 44.496vh) scale(0.3434);
}
to {
transform: translate(22.1978vw, 100vh) scale(0.3434);
}
}
.snow:nth-child(85) {
opacity: 0.2652;
transform: translate(47.7171vw, -10px) scale(0.0972);
animation: fall-85 23s -6s linear infinite;
}
@keyframes fall-85 {
50.885% {
transform: translate(47.732vw, 50.885vh) scale(0.0972);
}
to {
transform: translate(47.72455vw, 100vh) scale(0.0972);
}
}
.snow:nth-child(86) {
opacity: 0.508;
transform: translate(66.0764vw, -10px) scale(0.3069);
animation: fall-86 28s -12s linear infinite;
}
@keyframes fall-86 {
41.775% {
transform: translate(66.6456vw, 41.775vh) scale(0.3069);
}
to {
transform: translate(66.361vw, 100vh) scale(0.3069);
}
}
.snow:nth-child(87) {
opacity: 0.6986;
transform: translate(86.942vw, -10px) scale(0.075);
animation: fall-87 26s -16s linear infinite;
}
@keyframes fall-87 {
44.481% {
transform: translate(80.0067vw, 44.481vh) scale(0.075);
}
to {
transform: translate(83.47435vw, 100vh) scale(0.075);
}
}
.snow:nth-child(88) {
opacity: 0.1393;
transform: translate(6.5367vw, -10px) scale(0.5444);
animation: fall-88 29s -21s linear infinite;
}
@keyframes fall-88 {
33.757% {
transform: translate(8.9868vw, 33.757vh) scale(0.5444);
}
to {
transform: translate(7.76175vw, 100vh) scale(0.5444);
}
}
.snow:nth-child(89) {
opacity: 0.7707;
transform: translate(33.4989vw, -10px) scale(0.3861);
animation: fall-89 10s -7s linear infinite;
}
@keyframes fall-89 {
64.857% {
transform: translate(38.3294vw, 64.857vh) scale(0.3861);
}
to {
transform: translate(35.91415vw, 100vh) scale(0.3861);
}
}
.snow:nth-child(90) {
opacity: 0.947;
transform: translate(35.0493vw, -10px) scale(0.9575);
animation: fall-90 20s -26s linear infinite;
}
@keyframes fall-90 {
72.189% {
transform: translate(41.6065vw, 72.189vh) scale(0.9575);
}
to {
transform: translate(38.3279vw, 100vh) scale(0.9575);
}
}
.snow:nth-child(91) {
opacity: 0.1568;
transform: translate(65.3812vw, -10px) scale(0.2412);
animation: fall-91 13s -18s linear infinite;
}
@keyframes fall-91 {
48.527% {
transform: translate(57.79vw, 48.527vh) scale(0.2412);
}
to {
transform: translate(61.5856vw, 100vh) scale(0.2412);
}
}
.snow:nth-child(92) {
opacity: 0.0621;
transform: translate(89.5205vw, -10px) scale(0.3299);
animation: fall-92 30s -12s linear infinite;
}
@keyframes fall-92 {
47.901% {
transform: translate(97.9163vw, 47.901vh) scale(0.3299);
}
to {
transform: translate(93.7184vw, 100vh) scale(0.3299);
}
}
.snow:nth-child(93) {
opacity: 0.866;
transform: translate(75.8432vw, -10px) scale(0.3726);
animation: fall-93 27s -23s linear infinite;
}
@keyframes fall-93 {
57.781% {
transform: translate(66.904vw, 57.781vh) scale(0.3726);
}
to {
transform: translate(71.3736vw, 100vh) scale(0.3726);
}
}
.snow:nth-child(94) {
opacity: 0.9759;
transform: translate(63.855vw, -10px) scale(0.2428);
animation: fall-94 22s -2s linear infinite;
}
@keyframes fall-94 {
46.296% {
transform: translate(58.4536vw, 46.296vh) scale(0.2428);
}
to {
transform: translate(61.1543vw, 100vh) scale(0.2428);
}
}
.snow:nth-child(95) {
opacity: 0.036;
transform: translate(56.4994vw, -10px) scale(0.8827);
animation: fall-95 28s -3s linear infinite;
}
@keyframes fall-95 {
55.784% {
transform: translate(61.6938vw, 55.784vh) scale(0.8827);
}
to {
transform: translate(59.0966vw, 100vh) scale(0.8827);
}
}
.snow:nth-child(96) {
opacity: 0.5564;
transform: translate(27.9192vw, -10px) scale(0.6532);
animation: fall-96 23s -28s linear infinite;
}
@keyframes fall-96 {
37.632% {
transform: translate(19.4076vw, 37.632vh) scale(0.6532);
}
to {
transform: translate(23.6634vw, 100vh) scale(0.6532);
}
}
.snow:nth-child(97) {
opacity: 1;
transform: translate(35.0436vw, -10px) scale(0.0954);
animation: fall-97 29s -24s linear infinite;
}
@keyframes fall-97 {
53.828% {
transform: translate(37.5893vw, 53.828vh) scale(0.0954);
}
to {
transform: translate(36.31645vw, 100vh) scale(0.0954);
}
}
.snow:nth-child(98) {
opacity: 0.2503;
transform: translate(36.0802vw, -10px) scale(0.504);
animation: fall-98 25s -29s linear infinite;
}
@keyframes fall-98 {
39.321% {
transform: translate(37.8076vw, 39.321vh) scale(0.504);
}
to {
transform: translate(36.9439vw, 100vh) scale(0.504);
}
}
.snow:nth-child(99) {
opacity: 0.7878;
transform: translate(7.578vw, -10px) scale(0.055);
animation: fall-99 10s -2s linear infinite;
}
@keyframes fall-99 {
64.58% {
transform: translate(15.0292vw, 64.58vh) scale(0.055);
}
to {
transform: translate(11.3036vw, 100vh) scale(0.055);
}
}
.snow:nth-child(100) {
opacity: 0.3883;
transform: translate(60.109vw, -10px) scale(0.9225);
animation: fall-100 11s -24s linear infinite;
}
@keyframes fall-100 {
74.265% {
transform: translate(69.159vw, 74.265vh) scale(0.9225);
}
to {
transform: translate(64.634vw, 100vh) scale(0.9225);
}
}
.snow:nth-child(101) {
opacity: 0.3229;
transform: translate(71.2909vw, -10px) scale(0.1529);
animation: fall-101 30s -14s linear infinite;
}
@keyframes fall-101 {
57.767% {
transform: translate(76.607vw, 57.767vh) scale(0.1529);
}
to {
transform: translate(73.94895vw, 100vh) scale(0.1529);
}
}
.snow:nth-child(102) {
opacity: 0.0282;
transform: translate(95.6947vw, -10px) scale(0.1245);
animation: fall-102 14s -13s linear infinite;
}
@keyframes fall-102 {
38.383% {
transform: translate(89.3677vw, 38.383vh) scale(0.1245);
}
to {
transform: translate(92.5312vw, 100vh) scale(0.1245);
}
}
.snow:nth-child(103) {
opacity: 0.053;
transform: translate(98.4367vw, -10px) scale(0.1197);
animation: fall-103 30s -25s linear infinite;
}
@keyframes fall-103 {
68.529% {
transform: translate(91.7407vw, 68.529vh) scale(0.1197);
}
to {
transform: translate(95.0887vw, 100vh) scale(0.1197);
}
}
.snow:nth-child(104) {
opacity: 0.522;
transform: translate(88.5259vw, -10px) scale(0.6849);
animation: fall-104 22s -18s linear infinite;
}
@keyframes fall-104 {
43.547% {
transform: translate(97.6367vw, 43.547vh) scale(0.6849);
}
to {
transform: translate(93.0813vw, 100vh) scale(0.6849);
}
}
.snow:nth-child(105) {
opacity: 0.9827;
transform: translate(25.1394vw, -10px) scale(0.8929);
animation: fall-105 23s -3s linear infinite;
}
@keyframes fall-105 {
74.768% {
transform: translate(30.9914vw, 74.768vh) scale(0.8929);
}
to {
transform: translate(28.0654vw, 100vh) scale(0.8929);
}
}
.snow:nth-child(106) {
opacity: 0.1088;
transform: translate(55.6247vw, -10px) scale(0.9814);
animation: fall-106 15s -11s linear infinite;
}
@keyframes fall-106 {
31.628% {
transform: translate(55.7759vw, 31.628vh) scale(0.9814);
}
to {
transform: translate(55.7003vw, 100vh) scale(0.9814);
}
}
.snow:nth-child(107) {
opacity: 0.74;
transform: translate(35.0606vw, -10px) scale(0.2488);
animation: fall-107 22s -14s linear infinite;
}
@keyframes fall-107 {
79.405% {
transform: translate(39.8069vw, 79.405vh) scale(0.2488);
}
to {
transform: translate(37.43375vw, 100vh) scale(0.2488);
}
}
.snow:nth-child(108) {
opacity: 0.0954;
transform: translate(23.9725vw, -10px) scale(0.8049);
animation: fall-108 23s -16s linear infinite;
}
@keyframes fall-108 {
52.856% {
transform: translate(20.2791vw, 52.856vh) scale(0.8049);
}
to {
transform: translate(22.1258vw, 100vh) scale(0.8049);
}
}
.snow:nth-child(109) {
opacity: 0.426;
transform: translate(55.1714vw, -10px) scale(0.7757);
animation: fall-109 27s -16s linear infinite;
}
@keyframes fall-109 {
46.746% {
transform: translate(51.5272vw, 46.746vh) scale(0.7757);
}
to {
transform: translate(53.3493vw, 100vh) scale(0.7757);
}
}
.snow:nth-child(110) {
opacity: 0.6342;
transform: translate(48.6598vw, -10px) scale(0.2606);
animation: fall-110 29s -23s linear infinite;
}
@keyframes fall-110 {
44.268% {
transform: translate(56.3124vw, 44.268vh) scale(0.2606);
}
to {
transform: translate(52.4861vw, 100vh) scale(0.2606);
}
}
.snow:nth-child(111) {
opacity: 0.3728;
transform: translate(6.2942vw, -10px) scale(0.0199);
animation: fall-111 28s -4s linear infinite;
}
@keyframes fall-111 {
30.137% {
transform: translate(9.7294vw, 30.137vh) scale(0.0199);
}
to {
transform: translate(8.0118vw, 100vh) scale(0.0199);
}
}
.snow:nth-child(112) {
opacity: 0.8482;
transform: translate(90.1841vw, -10px) scale(0.976);
animation: fall-112 10s -16s linear infinite;
}
@keyframes fall-112 {
44.036% {
transform: translate(84.3933vw, 44.036vh) scale(0.976);
}
to {
transform: translate(87.2887vw, 100vh) scale(0.976);
}
}
.snow:nth-child(113) {
opacity: 0.8865;
transform: translate(52.4806vw, -10px) scale(0.1284);
animation: fall-113 22s -15s linear infinite;
}
@keyframes fall-113 {
63.802% {
transform: translate(43.9977vw, 63.802vh) scale(0.1284);
}
to {
transform: translate(48.23915vw, 100vh) scale(0.1284);
}
}
.snow:nth-child(114) {
opacity: 0.689;
transform: translate(45.0738vw, -10px) scale(0.4242);
animation: fall-114 10s -9s linear infinite;
}
@keyframes fall-114 {
38.354% {
transform: translate(37.9693vw, 38.354vh) scale(0.4242);
}
to {
transform: translate(41.52155vw, 100vh) scale(0.4242);
}
}
.snow:nth-child(115) {
opacity: 0.1567;
transform: translate(91.5397vw, -10px) scale(0.3313);
animation: fall-115 23s -10s linear infinite;
}
@keyframes fall-115 {
58.294% {
transform: translate(84.052vw, 58.294vh) scale(0.3313);
}
to {
transform: translate(87.79585vw, 100vh) scale(0.3313);
}
}
.snow:nth-child(116) {
opacity: 0.8197;
transform: translate(38.9357vw, -10px) scale(0.8133);
animation: fall-116 11s -6s linear infinite;
}
@keyframes fall-116 {
65.139% {
transform: translate(43.8853vw, 65.139vh) scale(0.8133);
}
to {
transform: translate(41.4105vw, 100vh) scale(0.8133);
}
}
.snow:nth-child(117) {
opacity: 0.5509;
transform: translate(15.7411vw, -10px) scale(0.6426);
animation: fall-117 23s -20s linear infinite;
}
@keyframes fall-117 {
49.496% {
transform: translate(17.5127vw, 49.496vh) scale(0.6426);
}
to {
transform: translate(16.6269vw, 100vh) scale(0.6426);
}
}
.snow:nth-child(118) {
opacity: 0.6045;
transform: translate(28.7514vw, -10px) scale(0.546);
animation: fall-118 23s -26s linear infinite;
}
@keyframes fall-118 {
41.283% {
transform: translate(34.5974vw, 41.283vh) scale(0.546);
}
to {
transform: translate(31.6744vw, 100vh) scale(0.546);
}
}
.snow:nth-child(119) {
opacity: 0.1055;
transform: translate(25.4717vw, -10px) scale(0.1405);
animation: fall-119 12s -20s linear infinite;
}
@keyframes fall-119 {
75.477% {
transform: translate(17.7483vw, 75.477vh) scale(0.1405);
}
to {
transform: translate(21.61vw, 100vh) scale(0.1405);
}
}
.snow:nth-child(120) {
opacity: 0.5134;
transform: translate(6.6795vw, -10px) scale(0.0072);
animation: fall-120 29s -9s linear infinite;
}
@keyframes fall-120 {
37.001% {
transform: translate(3.1576vw, 37.001vh) scale(0.0072);
}
to {
transform: translate(4.91855vw, 100vh) scale(0.0072);
}
}
.snow:nth-child(121) {
opacity: 0.8018;
transform: translate(75.0803vw, -10px) scale(0.6954);
animation: fall-121 12s -19s linear infinite;
}
@keyframes fall-121 {
64.155% {
transform: translate(66.2912vw, 64.155vh) scale(0.6954);
}
to {
transform: translate(70.68575vw, 100vh) scale(0.6954);
}
}
.snow:nth-child(122) {
opacity: 0.3397;
transform: translate(22.4666vw, -10px) scale(0.0145);
animation: fall-122 29s -3s linear infinite;
}
@keyframes fall-122 {
69.939% {
transform: translate(25.0924vw, 69.939vh) scale(0.0145);
}
to {
transform: translate(23.7795vw, 100vh) scale(0.0145);
}
}
.snow:nth-child(123) {
opacity: 0.0833;
transform: translate(39.4316vw, -10px) scale(0.3332);
animation: fall-123 17s -22s linear infinite;
}
@keyframes fall-123 {
64.398% {
transform: translate(30.0222vw, 64.398vh) scale(0.3332);
}
to {
transform: translate(34.7269vw, 100vh) scale(0.3332);
}
}
.snow:nth-child(124) {
opacity: 0.3697;
transform: translate(19.3702vw, -10px) scale(0.2519);
animation: fall-124 13s -19s linear infinite;
}
@keyframes fall-124 {
76.719% {
transform: translate(12.811vw, 76.719vh) scale(0.2519);
}
to {
transform: translate(16.0906vw, 100vh) scale(0.2519);
}
}
.snow:nth-child(125) {
opacity: 0.289;
transform: translate(90.4198vw, -10px) scale(0.0969);
animation: fall-125 12s -3s linear infinite;
}
@keyframes fall-125 {
69.723% {
transform: translate(84.0691vw, 69.723vh) scale(0.0969);
}
to {
transform: translate(87.24445vw, 100vh) scale(0.0969);
}
}
.snow:nth-child(126) {
opacity: 0.5464;
transform: translate(83.3305vw, -10px) scale(0.877);
animation: fall-126 28s -24s linear infinite;
}
@keyframes fall-126 {
41.827% {
transform: translate(77.546vw, 41.827vh) scale(0.877);
}
to {
transform: translate(80.43825vw, 100vh) scale(0.877);
}
}
.snow:nth-child(127) {
opacity: 0.0108;
transform: translate(23.5526vw, -10px) scale(0.4631);
animation: fall-127 30s -27s linear infinite;
}
@keyframes fall-127 {
74.389% {
transform: translate(19.9855vw, 74.389vh) scale(0.4631);
}
to {
transform: translate(21.76905vw, 100vh) scale(0.4631);
}
}
.snow:nth-child(128) {
opacity: 0.834;
transform: translate(21.4645vw, -10px) scale(0.7478);
animation: fall-128 10s -23s linear infinite;
}
@keyframes fall-128 {
58.679% {
transform: translate(26.0404vw, 58.679vh) scale(0.7478);
}
to {
transform: translate(23.75245vw, 100vh) scale(0.7478);
}
}
.snow:nth-child(129) {
opacity: 0.3804;
transform: translate(7.3805vw, -10px) scale(0.0386);
animation: fall-129 30s -23s linear infinite;
}
@keyframes fall-129 {
53.348% {
transform: translate(2.2879vw, 53.348vh) scale(0.0386);
}
to {
transform: translate(4.8342vw, 100vh) scale(0.0386);
}
}
.snow:nth-child(130) {
opacity: 0.7811;
transform: translate(49.0153vw, -10px) scale(0.6478);
animation: fall-130 26s -11s linear infinite;
}
@keyframes fall-130 {
64.042% {
transform: translate(43.7741vw, 64.042vh) scale(0.6478);
}
to {
transform: translate(46.3947vw, 100vh) scale(0.6478);
}
}
.snow:nth-child(131) {
opacity: 0.2065;
transform: translate(17.3143vw, -10px) scale(0.5589);
animation: fall-131 21s -6s linear infinite;
}
@keyframes fall-131 {
74.919% {
transform: translate(19.0039vw, 74.919vh) scale(0.5589);
}
to {
transform: translate(18.1591vw, 100vh) scale(0.5589);
}
}
.snow:nth-child(132) {
opacity: 0.0941;
transform: translate(68.4088vw, -10px) scale(0.2818);
animation: fall-132 18s -7s linear infinite;
}
@keyframes fall-132 {
52.161% {
transform: translate(65.7247vw, 52.161vh) scale(0.2818);
}
to {
transform: translate(67.06675vw, 100vh) scale(0.2818);
}
}
.snow:nth-child(133) {
opacity: 0.7083;
transform: translate(51.5478vw, -10px) scale(0.0492);
animation: fall-133 25s -17s linear infinite;
}
@keyframes fall-133 {
41.727% {
transform: translate(58.2344vw, 41.727vh) scale(0.0492);
}
to {
transform: translate(54.8911vw, 100vh) scale(0.0492);
}
}
.snow:nth-child(134) {
opacity: 0.0306;
transform: translate(39.2932vw, -10px) scale(0.622);
animation: fall-134 25s -16s linear infinite;
}
@keyframes fall-134 {
44.682% {
transform: translate(33.8285vw, 44.682vh) scale(0.622);
}
to {
transform: translate(36.56085vw, 100vh) scale(0.622);
}
}
.snow:nth-child(135) {
opacity: 0.2082;
transform: translate(82.4298vw, -10px) scale(0.8783);
animation: fall-135 10s -1s linear infinite;
}
@keyframes fall-135 {
71.343% {
transform: translate(89.3127vw, 71.343vh) scale(0.8783);
}
to {
transform: translate(85.87125vw, 100vh) scale(0.8783);
}
}
.snow:nth-child(136) {
opacity: 0.9066;
transform: translate(52.3468vw, -10px) scale(0.2168);
animation: fall-136 19s -27s linear infinite;
}
@keyframes fall-136 {
68.502% {
transform: translate(49.0007vw, 68.502vh) scale(0.2168);
}
to {
transform: translate(50.67375vw, 100vh) scale(0.2168);
}
}
.snow:nth-child(137) {
opacity: 0.2574;
transform: translate(89.0651vw, -10px) scale(0.7694);
animation: fall-137 14s -22s linear infinite;
}
@keyframes fall-137 {
34.709% {
transform: translate(97.9755vw, 34.709vh) scale(0.7694);
}
to {
transform: translate(93.5203vw, 100vh) scale(0.7694);
}
}
.snow:nth-child(138) {
opacity: 0.9085;
transform: translate(82.9295vw, -10px) scale(0.8454);
animation: fall-138 22s -13s linear infinite;
}
@keyframes fall-138 {
44.913% {
transform: translate(83.9996vw, 44.913vh) scale(0.8454);
}
to {
transform: translate(83.46455vw, 100vh) scale(0.8454);
}
}
.snow:nth-child(139) {
opacity: 0.9333;
transform: translate(98.7699vw, -10px) scale(0.0704);
animation: fall-139 17s -24s linear infinite;
}
@keyframes fall-139 {
54.563% {
transform: translate(100.0777vw, 54.563vh) scale(0.0704);
}
to {
transform: translate(99.4238vw, 100vh) scale(0.0704);
}
}
.snow:nth-child(140) {
opacity: 0.3268;
transform: translate(86.4545vw, -10px) scale(0.8982);
animation: fall-140 10s -25s linear infinite;
}
@keyframes fall-140 {
51.221% {
transform: translate(84.932vw, 51.221vh) scale(0.8982);
}
to {
transform: translate(85.69325vw, 100vh) scale(0.8982);
}
}
.snow:nth-child(141) {
opacity: 0.3305;
transform: translate(8.9356vw, -10px) scale(0.1666);
animation: fall-141 17s -5s linear infinite;
}
@keyframes fall-141 {
63.879% {
transform: translate(12.6096vw, 63.879vh) scale(0.1666);
}
to {
transform: translate(10.7726vw, 100vh) scale(0.1666);
}
}
.snow:nth-child(142) {
opacity: 0.8575;
transform: translate(20.7403vw, -10px) scale(0.8526);
animation: fall-142 18s -2s linear infinite;
}
@keyframes fall-142 {
34.368% {
transform: translate(29.0004vw, 34.368vh) scale(0.8526);
}
to {
transform: translate(24.87035vw, 100vh) scale(0.8526);
}
}
.snow:nth-child(143) {
opacity: 0.7957;
transform: translate(70.5512vw, -10px) scale(0.2752);
animation: fall-143 12s -17s linear infinite;
}
@keyframes fall-143 {
32.985% {
transform: translate(72.3494vw, 32.985vh) scale(0.2752);
}
to {
transform: translate(71.4503vw, 100vh) scale(0.2752);
}
}
.snow:nth-child(144) {
opacity: 0.1772;
transform: translate(88.016vw, -10px) scale(0.3901);
animation: fall-144 12s -13s linear infinite;
}
@keyframes fall-144 {
60.295% {
transform: translate(78.33vw, 60.295vh) scale(0.3901);
}
to {
transform: translate(83.173vw, 100vh) scale(0.3901);
}
}
.snow:nth-child(145) {
opacity: 0.872;
transform: translate(72.3544vw, -10px) scale(0.5258);
animation: fall-145 25s -5s linear infinite;
}
@keyframes fall-145 {
77.606% {
transform: translate(76.3055vw, 77.606vh) scale(0.5258);
}
to {
transform: translate(74.32995vw, 100vh) scale(0.5258);
}
}
.snow:nth-child(146) {
opacity: 0.2613;
transform: translate(24.7861vw, -10px) scale(0.7303);
animation: fall-146 21s -27s linear infinite;
}
@keyframes fall-146 {
49.763% {
transform: translate(30.7991vw, 49.763vh) scale(0.7303);
}
to {
transform: translate(27.7926vw, 100vh) scale(0.7303);
}
}
.snow:nth-child(147) {
opacity: 0.377;
transform: translate(10.518vw, -10px) scale(0.9207);
animation: fall-147 22s -28s linear infinite;
}
@keyframes fall-147 {
78.904% {
transform: translate(17.152vw, 78.904vh) scale(0.9207);
}
to {
transform: translate(13.835vw, 100vh) scale(0.9207);
}
}
.snow:nth-child(148) {
opacity: 0.5929;
transform: translate(37.3531vw, -10px) scale(0.6837);
animation: fall-148 25s -16s linear infinite;
}
@keyframes fall-148 {
52.098% {
transform: translate(37.2255vw, 52.098vh) scale(0.6837);
}
to {
transform: translate(37.2893vw, 100vh) scale(0.6837);
}
}
.snow:nth-child(149) {
opacity: 0.8029;
transform: translate(39.9406vw, -10px) scale(0.5322);
animation: fall-149 16s -13s linear infinite;
}
@keyframes fall-149 {
78.569% {
transform: translate(43.7927vw, 78.569vh) scale(0.5322);
}
to {
transform: translate(41.86665vw, 100vh) scale(0.5322);
}
}
.snow:nth-child(150) {
opacity: 0.6847;
transform: translate(21.0088vw, -10px) scale(0.9599);
animation: fall-150 12s -16s linear infinite;
}
@keyframes fall-150 {
52.357% {
transform: translate(17.0314vw, 52.357vh) scale(0.9599);
}
to {
transform: translate(19.0201vw, 100vh) scale(0.9599);
}
}
.snow:nth-child(151) {
opacity: 0.9578;
transform: translate(54.3257vw, -10px) scale(0.6614);
animation: fall-151 28s -14s linear infinite;
}
@keyframes fall-151 {
44.58% {
transform: translate(49.5732vw, 44.58vh) scale(0.6614);
}
to {
transform: translate(51.94945vw, 100vh) scale(0.6614);
}
}
.snow:nth-child(152) {
opacity: 0.4227;
transform: translate(39.1418vw, -10px) scale(0.6783);
animation: fall-152 10s -25s linear infinite;
}
@keyframes fall-152 {
76.347% {
transform: translate(33.449vw, 76.347vh) scale(0.6783);
}
to {
transform: translate(36.2954vw, 100vh) scale(0.6783);
}
}
.snow:nth-child(153) {
opacity: 0.3741;
transform: translate(16.8611vw, -10px) scale(0.9225);
animation: fall-153 22s -20s linear infinite;
}
@keyframes fall-153 {
72.94% {
transform: translate(20.2331vw, 72.94vh) scale(0.9225);
}
to {
transform: translate(18.5471vw, 100vh) scale(0.9225);
}
}
.snow:nth-child(154) {
opacity: 0.8908;
transform: translate(26.0798vw, -10px) scale(0.188);
animation: fall-154 30s -5s linear infinite;
}
@keyframes fall-154 {
38.996% {
transform: translate(30.2848vw, 38.996vh) scale(0.188);
}
to {
transform: translate(28.1823vw, 100vh) scale(0.188);
}
}
.snow:nth-child(155) {
opacity: 0.6432;
transform: translate(77.2541vw, -10px) scale(0.98);
animation: fall-155 15s -21s linear infinite;
}
@keyframes fall-155 {
52.213% {
transform: translate(74.3043vw, 52.213vh) scale(0.98);
}
to {
transform: translate(75.7792vw, 100vh) scale(0.98);
}
}
.snow:nth-child(156) {
opacity: 0.1492;
transform: translate(41.4941vw, -10px) scale(0.9499);
animation: fall-156 10s -14s linear infinite;
}
@keyframes fall-156 {
55.701% {
transform: translate(49.6352vw, 55.701vh) scale(0.9499);
}
to {
transform: translate(45.56465vw, 100vh) scale(0.9499);
}
}
.snow:nth-child(157) {
opacity: 0.1634;
transform: translate(78.9493vw, -10px) scale(0.2432);
animation: fall-157 15s -29s linear infinite;
}
@keyframes fall-157 {
57.259% {
transform: translate(72.4715vw, 57.259vh) scale(0.2432);
}
to {
transform: translate(75.7104vw, 100vh) scale(0.2432);
}
}
.snow:nth-child(158) {
opacity: 0.2982;
transform: translate(93.2836vw, -10px) scale(0.8994);
animation: fall-158 11s -1s linear infinite;
}
@keyframes fall-158 {
34.331% {
transform: translate(94.6891vw, 34.331vh) scale(0.8994);
}
to {
transform: translate(93.98635vw, 100vh) scale(0.8994);
}
}
.snow:nth-child(159) {
opacity: 0.4204;
transform: translate(43.067vw, -10px) scale(0.2147);
animation: fall-159 12s -29s linear infinite;
}
@keyframes fall-159 {
50.345% {
transform: translate(44.4119vw, 50.345vh) scale(0.2147);
}
to {
transform: translate(43.73945vw, 100vh) scale(0.2147);
}
}
.snow:nth-child(160) {
opacity: 0.5917;
transform: translate(21.228vw, -10px) scale(0.5662);
animation: fall-160 30s -23s linear infinite;
}
@keyframes fall-160 {
43.631% {
transform: translate(14.5839vw, 43.631vh) scale(0.5662);
}
to {
transform: translate(17.90595vw, 100vh) scale(0.5662);
}
}
.snow:nth-child(161) {
opacity: 0.23;
transform: translate(16.2808vw, -10px) scale(0.9086);
animation: fall-161 26s -7s linear infinite;
}
@keyframes fall-161 {
64.492% {
transform: translate(11.851vw, 64.492vh) scale(0.9086);
}
to {
transform: translate(14.0659vw, 100vh) scale(0.9086);
}
}
.snow:nth-child(162) {
opacity: 0.8369;
transform: translate(1.8679vw, -10px) scale(0.9147);
animation: fall-162 27s -4s linear infinite;
}
@keyframes fall-162 {
63.071% {
transform: translate(9.2523vw, 63.071vh) scale(0.9147);
}
to {
transform: translate(5.5601vw, 100vh) scale(0.9147);
}
}
.snow:nth-child(163) {
opacity: 0.1817;
transform: translate(82.26vw, -10px) scale(0.1876);
animation: fall-163 25s -29s linear infinite;
}
@keyframes fall-163 {
71.007% {
transform: translate(74.7009vw, 71.007vh) scale(0.1876);
}
to {
transform: translate(78.48045vw, 100vh) scale(0.1876);
}
}
.snow:nth-child(164) {
opacity: 0.4789;
transform: translate(6.3189vw, -10px) scale(0.2522);
animation: fall-164 25s -10s linear infinite;
}
@keyframes fall-164 {
44.52% {
transform: translate(-2.6774vw, 44.52vh) scale(0.2522);
}
to {
transform: translate(1.82075vw, 100vh) scale(0.2522);
}
}
.snow:nth-child(165) {
opacity: 0.6981;
transform: translate(44.3125vw, -10px) scale(0.8086);
animation: fall-165 26s -17s linear infinite;
}
@keyframes fall-165 {
43.232% {
transform: translate(40.5842vw, 43.232vh) scale(0.8086);
}
to {
transform: translate(42.44835vw, 100vh) scale(0.8086);
}
}
.snow:nth-child(166) {
opacity: 0.8554;
transform: translate(98.7642vw, -10px) scale(0.5135);
animation: fall-166 15s -14s linear infinite;
}
@keyframes fall-166 {
49.906% {
transform: translate(101.4266vw, 49.906vh) scale(0.5135);
}
to {
transform: translate(100.0954vw, 100vh) scale(0.5135);
}
}
.snow:nth-child(167) {
opacity: 0.6923;
transform: translate(66.9559vw, -10px) scale(0.3303);
animation: fall-167 21s -24s linear infinite;
}
@keyframes fall-167 {
55.284% {
transform: translate(76.7793vw, 55.284vh) scale(0.3303);
}
to {
transform: translate(71.8676vw, 100vh) scale(0.3303);
}
}
.snow:nth-child(168) {
opacity: 0.7113;
transform: translate(14.2908vw, -10px) scale(0.8149);
animation: fall-168 30s -10s linear infinite;
}
@keyframes fall-168 {
41.932% {
transform: translate(8.827vw, 41.932vh) scale(0.8149);
}
to {
transform: translate(11.5589vw, 100vh) scale(0.8149);
}
}
.snow:nth-child(169) {
opacity: 0.0035;
transform: translate(73.0189vw, -10px) scale(0.8814);
animation: fall-169 10s -1s linear infinite;
}
@keyframes fall-169 {
36.317% {
transform: translate(74.2767vw, 36.317vh) scale(0.8814);
}
to {
transform: translate(73.6478vw, 100vh) scale(0.8814);
}
}
.snow:nth-child(170) {
opacity: 0.4624;
transform: translate(1.515vw, -10px) scale(0.726);
animation: fall-170 24s -3s linear infinite;
}
@keyframes fall-170 {
79.728% {
transform: translate(-7.5715vw, 79.728vh) scale(0.726);
}
to {
transform: translate(-3.02825vw, 100vh) scale(0.726);
}
}
.snow:nth-child(171) {
opacity: 0.727;
transform: translate(89.6018vw, -10px) scale(0.1323);
animation: fall-171 21s -8s linear infinite;
}
@keyframes fall-171 {
69.575% {
transform: translate(83.8817vw, 69.575vh) scale(0.1323);
}
to {
transform: translate(86.74175vw, 100vh) scale(0.1323);
}
}
.snow:nth-child(172) {
opacity: 0.0378;
transform: translate(48.518vw, -10px) scale(0.1021);
animation: fall-172 17s -15s linear infinite;
}
@keyframes fall-172 {
49.279% {
transform: translate(52.4251vw, 49.279vh) scale(0.1021);
}
to {
transform: translate(50.47155vw, 100vh) scale(0.1021);
}
}
.snow:nth-child(173) {
opacity: 0.8843;
transform: translate(43.2426vw, -10px) scale(0.2078);
animation: fall-173 15s -30s linear infinite;
}
@keyframes fall-173 {
55.179% {
transform: translate(43.3479vw, 55.179vh) scale(0.2078);
}
to {
transform: translate(43.29525vw, 100vh) scale(0.2078);
}
}
.snow:nth-child(174) {
opacity: 0.4442;
transform: translate(43.7125vw, -10px) scale(0.0238);
animation: fall-174 21s -3s linear infinite;
}
@keyframes fall-174 {
52.688% {
transform: translate(37.6816vw, 52.688vh) scale(0.0238);
}
to {
transform: translate(40.69705vw, 100vh) scale(0.0238);
}
}
.snow:nth-child(175) {
opacity: 0.5615;
transform: translate(59.401vw, -10px) scale(0.2073);
animation: fall-175 13s -20s linear infinite;
}
@keyframes fall-175 {
58.974% {
transform: translate(51.2941vw, 58.974vh) scale(0.2073);
}
to {
transform: translate(55.34755vw, 100vh) scale(0.2073);
}
}
.snow:nth-child(176) {
opacity: 0.2114;
transform: translate(29.1831vw, -10px) scale(0.0857);
animation: fall-176 18s -20s linear infinite;
}
@keyframes fall-176 {
57.697% {
transform: translate(29.093vw, 57.697vh) scale(0.0857);
}
to {
transform: translate(29.13805vw, 100vh) scale(0.0857);
}
}
.snow:nth-child(177) {
opacity: 0.4695;
transform: translate(69.2341vw, -10px) scale(0.9977);
animation: fall-177 23s -9s linear infinite;
}
@keyframes fall-177 {
74.141% {
transform: translate(76.8148vw, 74.141vh) scale(0.9977);
}
to {
transform: translate(73.02445vw, 100vh) scale(0.9977);
}
}
.snow:nth-child(178) {
opacity: 0.237;
transform: translate(26.6732vw, -10px) scale(0.472);
animation: fall-178 16s -2s linear infinite;
}
@keyframes fall-178 {
78.079% {
transform: translate(19.0753vw, 78.079vh) scale(0.472);
}
to {
transform: translate(22.87425vw, 100vh) scale(0.472);
}
}
.snow:nth-child(179) {
opacity: 0.2647;
transform: translate(60.2559vw, -10px) scale(0.8765);
animation: fall-179 11s -22s linear infinite;
}
@keyframes fall-179 {
79.904% {
transform: translate(55.4449vw, 79.904vh) scale(0.8765);
}
to {
transform: translate(57.8504vw, 100vh) scale(0.8765);
}
}
.snow:nth-child(180) {
opacity: 0.4859;
transform: translate(45.7051vw, -10px) scale(0.2682);
animation: fall-180 26s -1s linear infinite;
}
@keyframes fall-180 {
47.519% {
transform: translate(38.7531vw, 47.519vh) scale(0.2682);
}
to {
transform: translate(42.2291vw, 100vh) scale(0.2682);
}
}
.snow:nth-child(181) {
opacity: 0.6703;
transform: translate(14.6364vw, -10px) scale(0.7566);
animation: fall-181 10s -25s linear infinite;
}
@keyframes fall-181 {
73.589% {
transform: translate(15.8144vw, 73.589vh) scale(0.7566);
}
to {
transform: translate(15.2254vw, 100vh) scale(0.7566);
}
}
.snow:nth-child(182) {
opacity: 0.3083;
transform: translate(87.0815vw, -10px) scale(0.5824);
animation: fall-182 18s -9s linear infinite;
}
@keyframes fall-182 {
65.632% {
transform: translate(77.7234vw, 65.632vh) scale(0.5824);
}
to {
transform: translate(82.40245vw, 100vh) scale(0.5824);
}
}
.snow:nth-child(183) {
opacity: 0.9985;
transform: translate(51.6384vw, -10px) scale(0.6026);
animation: fall-183 28s -24s linear infinite;
}
@keyframes fall-183 {
68.488% {
transform: translate(59.8945vw, 68.488vh) scale(0.6026);
}
to {
transform: translate(55.76645vw, 100vh) scale(0.6026);
}
}
.snow:nth-child(184) {
opacity: 0.8186;
transform: translate(19.5469vw, -10px) scale(0.6184);
animation: fall-184 21s -29s linear infinite;
}
@keyframes fall-184 {
79.874% {
transform: translate(22.427vw, 79.874vh) scale(0.6184);
}
to {
transform: translate(20.98695vw, 100vh) scale(0.6184);
}
}
.snow:nth-child(185) {
opacity: 0.8974;
transform: translate(56.8322vw, -10px) scale(0.9314);
animation: fall-185 14s -17s linear infinite;
}
@keyframes fall-185 {
57.543% {
transform: translate(55.9861vw, 57.543vh) scale(0.9314);
}
to {
transform: translate(56.40915vw, 100vh) scale(0.9314);
}
}
.snow:nth-child(186) {
opacity: 0.6138;
transform: translate(75.6275vw, -10px) scale(0.2003);
animation: fall-186 19s -10s linear infinite;
}
@keyframes fall-186 {
39.675% {
transform: translate(74.6389vw, 39.675vh) scale(0.2003);
}
to {
transform: translate(75.1332vw, 100vh) scale(0.2003);
}
}
.snow:nth-child(187) {
opacity: 0.0005;
transform: translate(40.093vw, -10px) scale(0.0982);
animation: fall-187 23s -6s linear infinite;
}
@keyframes fall-187 {
39.178% {
transform: translate(31.6192vw, 39.178vh) scale(0.0982);
}
to {
transform: translate(35.8561vw, 100vh) scale(0.0982);
}
}
.snow:nth-child(188) {
opacity: 0.9547;
transform: translate(8.207vw, -10px) scale(0.0997);
animation: fall-188 27s -8s linear infinite;
}
@keyframes fall-188 {
71.763% {
transform: translate(5.9169vw, 71.763vh) scale(0.0997);
}
to {
transform: translate(7.06195vw, 100vh) scale(0.0997);
}
}
.snow:nth-child(189) {
opacity: 0.5848;
transform: translate(57.9919vw, -10px) scale(0.0791);
animation: fall-189 28s -30s linear infinite;
}
@keyframes fall-189 {
33.117% {
transform: translate(55.6052vw, 33.117vh) scale(0.0791);
}
to {
transform: translate(56.79855vw, 100vh) scale(0.0791);
}
}
.snow:nth-child(190) {
opacity: 0.9609;
transform: translate(93.6763vw, -10px) scale(0.524);
animation: fall-190 26s -27s linear infinite;
}
@keyframes fall-190 {
75.865% {
transform: translate(93.7106vw, 75.865vh) scale(0.524);
}
to {
transform: translate(93.69345vw, 100vh) scale(0.524);
}
}
.snow:nth-child(191) {
opacity: 0.8784;
transform: translate(28.6505vw, -10px) scale(0.1713);
animation: fall-191 22s -18s linear infinite;
}
@keyframes fall-191 {
46.192% {
transform: translate(28.1989vw, 46.192vh) scale(0.1713);
}
to {
transform: translate(28.4247vw, 100vh) scale(0.1713);
}
}
.snow:nth-child(192) {
opacity: 0.6617;
transform: translate(34.5591vw, -10px) scale(0.4669);
animation: fall-192 12s -29s linear infinite;
}
@keyframes fall-192 {
34.012% {
transform: translate(40.2847vw, 34.012vh) scale(0.4669);
}
to {
transform: translate(37.4219vw, 100vh) scale(0.4669);
}
}
.snow:nth-child(193) {
opacity: 0.9718;
transform: translate(17.0125vw, -10px) scale(0.6494);
animation: fall-193 16s -27s linear infinite;
}
@keyframes fall-193 {
35.66% {
transform: translate(12.1368vw, 35.66vh) scale(0.6494);
}
to {
transform: translate(14.57465vw, 100vh) scale(0.6494);
}
}
.snow:nth-child(194) {
opacity: 0.6216;
transform: translate(82.9494vw, -10px) scale(0.579);
animation: fall-194 23s -10s linear infinite;
}
@keyframes fall-194 {
67.811% {
transform: translate(76.62vw, 67.811vh) scale(0.579);
}
to {
transform: translate(79.7847vw, 100vh) scale(0.579);
}
}
.snow:nth-child(195) {
opacity: 0.4147;
transform: translate(65.1717vw, -10px) scale(0.9929);
animation: fall-195 12s -29s linear infinite;
}
@keyframes fall-195 {
47.095% {
transform: translate(65.9182vw, 47.095vh) scale(0.9929);
}
to {
transform: translate(65.54495vw, 100vh) scale(0.9929);
}
}
.snow:nth-child(196) {
opacity: 0.5961;
transform: translate(9.9288vw, -10px) scale(0.9134);
animation: fall-196 17s -6s linear infinite;
}
@keyframes fall-196 {
47.449% {
transform: translate(4.2617vw, 47.449vh) scale(0.9134);
}
to {
transform: translate(7.09525vw, 100vh) scale(0.9134);
}
}
.snow:nth-child(197) {
opacity: 0.3054;
transform: translate(83.164vw, -10px) scale(0.0352);
animation: fall-197 14s -8s linear infinite;
}
@keyframes fall-197 {
32.716% {
transform: translate(90.6895vw, 32.716vh) scale(0.0352);
}
to {
transform: translate(86.92675vw, 100vh) scale(0.0352);
}
}
.snow:nth-child(198) {
opacity: 0.6009;
transform: translate(18.4956vw, -10px) scale(0.159);
animation: fall-198 25s -1s linear infinite;
}
@keyframes fall-198 {
73.632% {
transform: translate(15.61vw, 73.632vh) scale(0.159);
}
to {
transform: translate(17.0528vw, 100vh) scale(0.159);
}
}
.snow:nth-child(199) {
opacity: 0.1031;
transform: translate(56.5687vw, -10px) scale(0.8017);
animation: fall-199 22s -30s linear infinite;
}
@keyframes fall-199 {
57.886% {
transform: translate(54.2607vw, 57.886vh) scale(0.8017);
}
to {
transform: translate(55.4147vw, 100vh) scale(0.8017);
}
}
.snow:nth-child(200) {
opacity: 0.809;
transform: translate(7.4548vw, -10px) scale(0.0917);
animation: fall-200 20s -27s linear infinite;
}
@keyframes fall-200 {
75.514% {
transform: translate(1.2557vw, 75.514vh) scale(0.0917);
}
to {
transform: translate(4.35525vw, 100vh) scale(0.0917);
}
}
The body styles set the background and create a snowy atmosphere. The .snow class styles the individual snowflakes. To make the snowflakes fall and give the animation effect, we used CSS keyframes.
Feel free to customize the snowflake properties by modifying the opacity, size, and animation duration as needed. You can also add more snowflakes to increase the snowfall density.
That’s all! hopefully, you have successfully created the Falling Snow Effect using this HTML and CSS code. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
45+ CSS3 Image Hover Effects- Fade In On Scroll Using CSS and JavaScript
- Hamburger to Cross Animation CSS
- Animate when Scrolled into View JavaScript
- Change Text Automatically in JavaScript
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.