How to simulate snow fall in blogger post

Back>

With css animation, we can simulate snow fall in blogger post

Example

<br />
<div id="stage">
<div id="snow">
</div>
</div>
<style>
#stage { background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTqRxjy-nvCsD1VQOiMFpA-7ihXCEftDP4uN2vaQPi0ONjfaaXzFVnwSWue_u8xJLrgn98YwxdoiY5j9JaoQsTS7IumWRsd6yWoX0yoHQ-j3TFpGVbY6huimyEvCsIf5cvsFvDCCv_F3M/s1600/sad-alone-lonely-girl-lost-in-old-memories-sitting-under-tree-wide.jpg');
background-size: 100%;
height: 500px;
}
#snow {
 background: none;
 font-family: Androgyne;
 background-image:
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxLocQMe7uhtKAe2geSGqWO2oUDTCWFgDrBsU1B_G8MasrzMCmayi2s5q-VkG7jM5VprwbOcPbVfkD7XOhS_7iu2gzO0d2cVjy6F_cqQOkClNAeYvUIxI9jFjYjWNOHwQyzET_m5dANE4e/s1600/s1.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmkfeKmkdSLzPAXyiuhBkFy19oyaxDG-hntYXhkCzs0KMSqhllsOypcDo4sscrhswqEk5u3tIrEPcCXVCjzgp28lPRdoM0uOf1rMVCd_bBKTpr1f0OBBjs5gwoFpujkFDtmPPqz-uYgV4d/s1600/s2.png'),
 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2xlYJm9rnHYdxDsPK6tPJaAQROdTSNTDbr9ebgpNfTWfM7Zcmczk1zccn7i9h-YOOqU5l8UajESjCXBA2_5dCK_ebu8haySUD_wlph2Co2J7lHIubi7Q3JJMSY0cKEMk8L5mytcM82o4s/s1600/s3.png');
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
 z-index:1;
 -webkit-animation: snow 12s linear infinite;
 -moz-animation: snow 12s linear infinite;
 -ms-animation: snow 12s linear infinite;
 animation: snow 12s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
</style>