Techumber
Home Blog Work

Amazing Snow Fall Effect Using Pure CSS3

Published on December 20, 2012

In our last post we learned how to create snowfall effect using JavaScript plugin Make ShowStrome.js. To-day I will explain how to create similer kind of effect using CSS3. You can find lots of javascript(Jquery) to CSS3 conversions in CSS3-Widgets section. I think this is also another JavaScript to jquery conversion. Have a look at the demo below. Amazing Snow Fall Effect Using Pure CSS3

Demo

Download

index.html

<html>
  <head>
    <title>Amazing Snow Fall Effect Using Pure CSS3:demos.techumber.com</title>
    <style></style>
  </head>
  <body></body>
</html>

CSS

body {
  background: #212121;
  font-family: Androgyne;
  background-image: url('img/s1.png'), url('img/s2.png'), url('img/s3.png');
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-animation: snow 10s linear infinite;
  -moz-animation: snow 10s linear infinite;
  -ms-animation: snow 10s linear infinite;
  animation: snow 10s linear infinite;
}

Creating key-frames

@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;
  }
}

Cross browser support

@-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;
  }
}

Complete Code

<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>demos.techumber.com</title>
    <style type="text/css">
      @font-face {
        font-family: Androgyne;
        src: url('Androgyne_TB.otf');
      }
      .container {
        width: 700px;
        margin: 0 auto;
      }
      .logo {
        text-align: center;
      }
      .logo a {
        color: #fff;
      }
      body {
        background: #212121;
        font-family: Androgyne;
        background-image: url('img/s1.png'), url('img/s2.png'), url('img/s3.png');
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        -webkit-animation: snow 10s linear infinite;
        -moz-animation: snow 10s linear infinite;
        -ms-animation: snow 10s linear infinite;
        animation: snow 10s 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>
  </head>
  <body>
    <div class="container">
      <header>
        <h1 class="logo">
          <a href="//techumber.com">
            Techumber.com
          </a>
        </h1>
      </header>
    </div>
  </body>
</html>