Animated Falling Snow Using Keyframes in CSS3 without Java Script

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

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

  1. The wrapper
    .
  2. The animation layer .
  3. The image .

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");
}

Continue reading here: Web fonts with CSS @font-face rule in detail

Was this article helpful?

+1 0