html and css work around for snow on WordPress.com sites

gistfile1.txt

Thanks for all of your feedback. There is a work around available with CSS.

In order to use this option, you need to have the premium plan. I know that’s not possible for everyone. But, I am hopeful this could help some.

———————————
– Open media library
– Upload “snowflake.png“
– Note the URL

– Open customizer
– Go to “Widgets”
– Create a new “Custom HTML” widget in any widget area

Add the following HTML:
<div class="fallingSnow">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>   
    </div>
    
 – Go to “Custom CSS”
– Paste in the following, and replace snowflake.png with the full URL from your media library.

.fallingSnow {
    position: absolute;
    left: 0px; right: 0px; top: 0px; height: 500px;
    text-align: center;
}
.fallingSnow span {
    display: inline-block;
    width: 20px;
    height: 21px;
    margin: -280px 60px 54px  -34px;
    background:url("snowflake.png");
 
    -webkit-animation: fallingSnow 12s infinite  cubic-bezier(0.35,0.45,0.39,0.29);
    -moz-animation: fallingSnow 12s infinite  cubic-bezier(0.35,0.45,0.39,0.29);
}
.fallingSnow span:nth-child(5n+5) {
 
    -webkit-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
}
.fallingSnow span:nth-child(3n+2) {
 
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}
.fallingSnow span:nth-child(2n+5) {
 
    -webkit-animation-delay: 1.7s;
    -moz-animation-delay: 1.7s;
}
 
.fallingSnow span:nth-child(3n+10) {
 
    -webkit-animation-delay: 2.7s;
    -moz-animation-delay: 2.7s;
}
.fallingSnow span:nth-child(7n+2) {
 
    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
}
.fallingSnow span:nth-child(4n+5) {
 
    -webkit-animation-delay: 5.5s;
    -moz-animation-delay: 5.5s;
}
.fallingSnow span:nth-child(3n+7) {
 
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
}
@-webkit-keyframes fallingSnow {
  0% {
    opacity: 1;
 
    -webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    opacity: 1;
 
    -webkit-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    opacity: 0;
 
    -webkit-transform: translate(150px, 800px) rotateZ(360deg);
  }
}
@-moz-keyframes fallingSnow {
  0% {
    opacity: 1;
 
    -webkit-transform: translate(0, 0px) rotateZ(0deg);
  }
  75% {
    opacity: 1;
 
    -webkit-transform: translate(100px, 600px) rotateZ(270deg); 
  }
  100% {
    opacity: 0;
 
    -webkit-transform: translate(150px, 800px) rotateZ(360deg);
  }
}

Don't forget to SAVE your changes :) 

This can be used for the snowflake.png

https://cldup.com/zm5pVdFwcJ-3000x3000.png

original credit belongs to the folks over at premium coding:

https://href.li/?https://premiumcoding.com/css3-tricks-falling-snow-css/