Pure CSS Falling Snowflake Animation

Spread the love

The use of CSS animation on a webpage is a unique way to show the creativity of your design. Whether you use the animation for a specific event or as a background of a specific container it produces a creative look and feel. There are a number of abstract animations available on the different resources on the web. But on the other side, there are also multiple natural animations like flower blossoms and falling leaves animation, etc. Well! here we are going to create a similar animation about falling snowflake animation using pure CSS.

Basically, it’s an animated snow-falling background for web pages that can be used for various purposes. The final output can be seen on the demo page to check how snowflakes are falling. You can use this animation as a background with custom gradient color and snowflake’s falling speed.

OK! now come to the actual point, how can you make snowflake animation using CSS. The answer is really simple, you just need to create some white snowflake symbols and animate them using CSS keyframes. So, let’s get started with the following step-by-step guide to make falling snowflake animation.

The HTML Code

The HTML structure for the snowflake animation is very simple. Create a div element with a class ane "snowflakes" and place i tag (as much as you want) inside it.

<div class="snowflakes">
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
    <i></i><i></i><i></i><i></i>
</div>

You can also create i tag inside the snowflakes container through JavaScript using the loop.

CSS for Falling Snowflake Animation

In the very first step, create the gradient background for the snowflake container. You can set gradient background for the whole body or for a specific container in which you want to make a snowflake animation. The following CSS snippet makes a blue background, you can choose a custom gradient background from this collection.

body {
  background: #1e5799;
  /* Old browsers */
  background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(100%, #7db9e8));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #1e5799 0%, #7db9e8 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
  /* IE6-9 */
  min-height: 100%;
}

Select the "snowflakes" class and define its 100% width and 1200px height. You can set the custom value for the height according to your needs. Define the position property with the absolute value in order to use snowflake animation as an animated background. Similarly, define the top and left values as -90px and 0 respectively.

.snowflakes {
  width: 100%;
  height: 1200px;
  position: absolute;
  top: -90px;
  left: 0;
}

After that, decide which color you want to use for the snowflakes. Basically, you can set any color for the snowflakes but the white color makes it more realistic. So, target the "i" tag, and its before & after pseudo selector of the snowflakes class, and specify white background.

.snowflakes i,
.snowflakes i:after,
.snowflakes i:before {
  background: white;
}

Now, it’s time to shape a snowflake using before & after pseudo-class. Therefore, select i element and define 100% dimension. Specify an absolute position with 0 value of top and left property. Likewise, define the content property and place a dot "." inside it. Use the CSS rotate transformation with a 120-degree value in order to make an asterisk symbol.

.snowflakes i:after,
.snowflakes i:before {
  height: 100%;
  width: 100%;
  content: ".";
  position: absolute;
  top: 0px;
  left: 0px;
  -webkit-transform: rotate(120deg);
}

Rotate the before selector with a 240-degree value to exactly shape the snowflake symbol.

.snowflakes i:before {
  -webkit-transform: rotate(240deg);
}

CSS Animation Keyframes

In the CSS keyframes, use the translate3d, rotate, and scale property and define the following values in order to create falling animation.

@-webkit-keyframes snowflakes {
  0% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.6);
  }
  100% {
    -webkit-transform: translate3d(15px, 1200px, 0px) rotate(360deg) scale(0.6);
  }
}

After creating keyframes, apply animation to the i element of the snowflakes class. To do so, use the animation property and define the animation-name along with the duration. You can set the custom value for the duration in order to increase/decrease the snowflake’s falling speed. Also, define the relative position and display it as an inline-block element.

.snowflakes i {
  display: inline-block;
  -webkit-animation: snowflakes 3s linear 2s 20;
  -moz-animation: snowflakes 3s linear 2s 20;
  position: relative;
}

In the final step, target the i element using the nth-child pseudo selector with the following mentioned formulas to style each snowflake differently.  Use different values for the animation duration, iteration count, and transform-origin as described below:

.snowflakes i:nth-child(3n) {
  width: 16px;
  height: 4px;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: 30;
  -webkit-transform-origin: right -45px;
}
.snowflakes i:nth-child(3n+1) {
  width: 24px;
  height: 6px;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: 45;
  -webkit-transform-origin: right -30px;
}
.snowflakes i:nth-child(3n+2) {
  width: 32px;
  height: 8px;
  -webkit-animation-duration: 8s;
  -webkit-animation-iteration-count: 60;
  -webkit-transform-origin: right -15px;
}
/* different delays so they don't all start at the same time */
.snowflakes i:nth-child(7n) {
  opacity: 0.3;
  -webkit-animation-delay: 0s;
  -webkit-animation-timing-function: ease-in;
}
.snowflakes i:nth-child(7n+1) {
  opacity: 0.4;
  -webkit-animation-delay: 1s;
  -webkit-animation-timing-function: ease-out;
}
.snowflakes i:nth-child(7n+2) {
  opacity: 0.5;
  -webkit-animation-delay: 1.5s;
  -webkit-animation-timing-function: linear;
}
.snowflakes i:nth-child(7n+3) {
  opacity: 0.6;
  -webkit-animation-delay: 2s;
  -webkit-animation-timing-function: ease-in;
}
.snowflakes i:nth-child(7n+4) {
  opacity: 0.7;
  -webkit-animation-delay: 2.5s;
  -webkit-animation-timing-function: linear;
}
.snowflakes i:nth-child(7n+5) {
  opacity: 0.8;
  -webkit-animation-delay: 3s;
  -webkit-animation-timing-function: ease-out;
}
.snowflakes i:nth-child(7n+6) {
  opacity: 0.9;
  -webkit-animation-delay: 3.5s;
  -webkit-animation-timing-function: ease-in;
}

That’s all! I hope you have successfully created the falling snowflake animation using pure CSS. If you have any questions or suggestions, let me know by comment below.

Share it!

You May Also Like

Leave a Comment