Home / Articles / Programming languages / Markup languages / HTML & CSS / Animated Falling Snow Using Keyframes in CSS3 without JavaScript

Animated Falling Snow Using Keyframes in CSS3 without JavaScript

Animated Falling Snow Using Keyframes in CSS3 without JavaScript
Animated Falling Snow Using Keyframes in CSS3 without JavaScript
Authors: Sergey Fedus
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


Winter has already come! It's time to decorate websites with wintry patterns! The shortest way to do it is by using keyframe animation in CSS3 without JavaScript. This article demonstrates animated falling snow with 3 different types of snowflakes falling in 3 different directions.

Simplicity is the key to understanding complicated things. On the Internet, many various approaches can be found on how to create an animation of falling snow, but almost all of them use JavaScript and have complicated code.

This article shows another approach to create the falling snow animation, but only with the use of CSS3 features. Such approach is natively supported by all modern browsers.

Animated Falling Snow Using Keyframes in CSS3: Snowballs
Animated Falling Snow Using Keyframes in CSS3: Snowflakes
Animated Falling Snow Using Keyframes in CSS3: Blurred snow

Working Principle

The falling snow consists of three main elements: the image itself, the animation layer, and the wrapper.

The image is a regular img HTML tag that is used to show an image beneath the animation layer. It also stretches the wrapper, which defines borders for the animation layer.

The animation layer consists of three sub-layers where each sub-layer has a background with a semi-transparent image of a snow pattern. Every sub-layer has a different snow pattern image with small, medium and large snowflakes.

To make the snow pattern sub-layers move, the CSS3 @keyframes rule is used. The first sub-layer has the snow pattern image with small-sized snowflakes, and it continuously moves the background from one side to another in slow motion. The second sub-layer has medium-sized snowflakes with a medium speed of motion. The third sub-layer has large-sized snowflakes with a quick speed of motion.

Movement of all these sub-layers creates the animation of the falling snow that looks like it is falling everywhere: close and far within the image.

HTML Structure

<div class="falling-snow">
  <i></i>
  <img src="image.jpg" alt="">
</div>
  1. The wrapper <div class="falling-snow"></div>.
  2. The animation layer <i></i>.
  3. The image <img src="image.jpg" alt="">.

Base Styles

.falling-snow {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.falling-snow img {
  max-width: 100%;
  height: auto;
  display: block;
}

.falling-snow i:after,
.falling-snow i:before {
  content: "";
}

.falling-snow i:after,
.falling-snow i:before,
.falling-snow i {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.falling-snow i:after {
  background: url("snowballs-lg.png") repeat 0px 0px;
  animation: falling-down-snow 4s linear infinite;
}

.falling-snow i:before {
  background: url("snowballs-md.png") repeat 0px 0px;
  animation: falling-down-snow 8s linear infinite;
}

.falling-snow i {
  background: url("snowballs-sm.png") repeat 0px 0px;
  animation: falling-down-snow 20s linear infinite;
}

@keyframes falling-down-snow {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0px 280px;
  }
}

Additional Styles

These styles add a support of 2 new types of snowflakes and 2 new directions for the falling snow: left and right side.

.falling-snow.left-side i:after,
.falling-snow.left-side i:before,
.falling-snow.left-side i {
  animation-name: falling-left-side-snow;
}

.falling-snow.right-side i:after,
.falling-snow.right-side i:before,
.falling-snow.right-side i {
  animation-name: falling-right-side-snow;
}

@keyframes falling-left-side-snow {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -280px 280px;
  }
}

@keyframes falling-right-side-snow {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 280px 280px;
  }
}

.falling-snow.snowflakes i:after {
  background-image: url("snowflakes-lg.png");
}

.falling-snow.snowflakes i:before {
  background-image: url("snowflakes-md.png");
}

.falling-snow.snowflakes i {
  background-image: url("snowflakes-sm.png");
}

.falling-snow.blurred-snow i:after {
  background-image: url("blurred-snow-lg.png");
}

.falling-snow.blurred-snow i:before {
  background-image: url("blurred-snow-md.png");
}

.falling-snow.blurred-snow i {
  background-image: url("blurred-snow-sm.png");
}

Live demo

The following archive contains all the examples discussed above:



Read also

Log in or create a user account to post a comment.

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation