Table of Contents

Animated Snowfall Background Effect

The Code

HTML

<div id="background-effect" class="background-effect--snowfall">
  <div id="background-effect__animations">
    <div id="cloudlayers"></div>
    <div id="snowlayers"></div>
  </div>
</div>

CSS

#background-effect.background-effect--snowfall {
  bottom: 0;
  left: 50%;
  top: 0;
  margin: 0;
  position: fixed;
  width: 100%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: -100;
}

#background-effect.background-effect--snowfall div {
  position: absolute;
  width: 100%;
  height: 100%;
}

#background-effect.background-effect--snowfall #background-effect__animations {
  -webkit-animation: fade-in 2s cubic-bezier(0.55, 0.06, 0.68, 0.19);
  animation: fade-in 2s cubic-bezier(0.55, 0.06, 0.68, 0.19);
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.125) 64px, rgba(255,255,255,0) 192px, rgba(255,255,255,0) 100%);
}

#background-effect.background-effect--snowfall .winter-cloudlayers {
  background-image: url("/image/interface/background/snowfall/cloudlayer1.png"),url("/image/interface/background/snowfall/cloudlayer2.png");
  background-position: 0 0px, 0 0;
  background-repeat: repeat-x, repeat-x;
  background-size: 1152px 128px, 1440px 160px;
  -webkit-animation-duration: 600s;
  animation-duration: 600s;
  -webkit-animation-name: winter-cloudlayers-animation;
  animation-name: winter-cloudlayers-animation;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  opacity: 0.5;
}

#background-effect.background-effect--snowfall .winter-snowlayers {
  background-image: url("/image/interface/background/snowfall/snowlayer1.png"),url("/image/interface/background/snowfall/snowlayer2.png"),url("/image/interface/background/snowfall/snowlayer3.png");
  background-position: 0 0px, 0 0px, 0 0;
  background-repeat: repeat, repeat, repeat;
  background-size: 512px 512px, 512px 512px, 512px 512px;
  -webkit-animation-duration: 75s,50s;
  animation-duration: 75s,50s;
  -webkit-animation-name: winter-snowlayers-animation-x, winter-snowlayers-animation-y;
  animation-name: winter-snowlayers-animation-x, winter-snowlayers-animation-y;
  -webkit-animation-iteration-count: infinite, infinite;
  animation-iteration-count: infinite, infinite;
  -webkit-animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1),linear;
  animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1),linear;
  opacity: 0.375;
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes winter-cloudlayers-animation {
  from {
    background-position: 0 0px, 0 0;
  }

  to {
    background-position: 14399px 0px, 10079px 0;
  }
}

@keyframes winter-cloudlayers-animation {
  from {
    background-position: 0 0px, 0 0;
  }

  to {
    background-position: 14399px 0px, 10079px 0;
  }
}

@-webkit-keyframes winter-snowlayers-animation-x {
  0% {
    background-position-x: 0px, 0px, 0;
  }

  20% {
    background-position-x: 1263.2px,648.8px,239.2px;
  }

  40% {
    background-position-x: 3651.4px,2422.6px,1603.4px;
  }

  60% {
    background-position-x: 4539.6px,2696.4px,1467.6px;
  }

  80% {
    background-position-x: 6927.8px,4470.2px,2831.8px;
  }

  100% {
    background-position-x: 8191px, 5119px, 3071px;
  }
}

@keyframes winter-snowlayers-animation-x {
  0% {
    background-position-x: 0px, 0px, 0;
  }

  20% {
    background-position-x: 1263.2px,648.8px,239.2px;
  }

  40% {
    background-position-x: 3651.4px,2422.6px,1603.4px;
  }

  60% {
    background-position-x: 4539.6px,2696.4px,1467.6px;
  }

  80% {
    background-position-x: 6927.8px,4470.2px,2831.8px;
  }

  100% {
    background-position-x: 8191px, 5119px, 3071px;
  }
}

@-webkit-keyframes winter-snowlayers-animation-y {
  0% {
    background-position-y: 0px, 0px, 0;
  }

  20% {
    background-position-y: 2047.8px, 819px, 614.2px;
  }

  40% {
    background-position-y: 4095.6px, 1638px, 1228.4px;
  }

  60% {
    background-position-y: 6143.4px, 2457px, 1842.6px;
  }

  80% {
    background-position-y: 8191.2px, 3276px, 2456.8px;
  }

  100% {
    background-position-y: 10239px, 4095px, 3071px;
  }
}

@keyframes winter-snowlayers-animation-y {
  0% {
    background-position-y: 0px, 0px, 0;
  }

  20% {
    background-position-y: 2047.8px, 819px, 614.2px;
  }

  40% {
    background-position-y: 4095.6px, 1638px, 1228.4px;
  }

  60% {
    background-position-y: 6143.4px, 2457px, 1842.6px;
  }

  80% {
    background-position-y: 8191.2px, 3276px, 2456.8px;
  }

  100% {
    background-position-y: 10239px, 4095px, 3071px;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  #background-effect.background-effect--snowfall .winter-cloudlayers {
    background-image: url("/image/interface/background/snowfall/cloudlayer1.x2.png"),url("/image/interface/background/snowfall/cloudlayer2.x2.png");
    -webkit-animation-duration: 900s;
    animation-duration: 900s;
  }

  #background-effect.background-effect--snowfall .winter-snowlayers {
    background-image: url("/image/interface/background/snowfall/snowlayer1.x2.png"),url("/image/interface/background/snowfall/snowlayer2.x2.png"),url("/image/interface/background/snowfall/snowlayer3.x2.png");
    -webkit-animation-duration: 100s,75s;
    animation-duration: 100s,75s;
  }
}

Special Thanks

This page is comprised of my own additions and either partially or heavily modified elements from the following source(s):

Cloud graphics derived from resources found at: http://pngimg.com/
Source: http://pngimg.com/img/nature/cloud

Cloud Graphics License

Cloud graphics derived from resources found at http://pngimg.com/
src: http://pngimg.com/img/nature/cloud

liscense: "free for all non-commercial purposes and also for personal use"
src: http://pngimg.com/about

Our website is a large catalog of PNG images. We do not sell images and do not earn money in such way. So, it is for FREE!

But... There are some rules.

All PNG images on our web site are free. That means that you can use them for free for all non-commercial purposes and also for personal use.

You can use images in digital format on websites, blog posts, social media, advertisements, film and television productions, web and mobile applications and also n printed materials such as magazines, newspapers, books, brochures, flyers, product packaging.

But you can not resell images or earn money using our images.

========================================================================================================