Snowfall Animation Effect using CSS
Last Updated :
01 Aug, 2024
In this article, we will see how to create a snowfall animation using HTML and CSS purely, without Javascript & related libraries. In this animation, the user will see the screen covered with a background image, & small snowballs are falling down the screen. As they are falling, they fade away in the air and appear again from the top of the screen. We also have text in the middle of the screen.
Approach
The following approach will be utilized to create the Snowfall Animation using CSS, which is described below:
- Create a <div> tag as the container of the entire animation. It has two <div> tags in it, one for text and one for the particles.
- A text container will have a heading and a paragraph using the <h1> and <p> tags.
- Position the text container in the center of the screen by using the position property as absolute. Give the text colors and text shadows according to the colors of the background image.
- The particle container has 15 <div> tags, where each playing the role of snowball.
- Create particles by simply making rounded <div> with a white background. Set each of them with the position of absolute, to freely place them on the screen. Spread them evenly from left to right on the top of the screen.
- To make them look like they are coming from the top, place them higher than the viewing height by setting the negative values to the top property.
- Make them come down the screen while moving zig-zag horizontally using the alternating positive and negative x values in the translate() method of the transform property in the various percentages of completion in the animation define using the @keyframe keyword.
- As they come down, their opacity decreases. This animation keeps running infinitely and linearly.
- In order to create it more life-like, set the different durations of animations to each particle & which will disappear a little slower.
Example: This example illustrates the Snowfall Animation using CSS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeeksforGeeks Pure CSS Snow-ball Animation</title>
<style>
/* General Style */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Verdana', Geneva, Tahoma, sans-serif;
}
/* Container Style */
.container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: url('https://media.geeksforgeeks.org/wp-content/uploads/20230104075101/GFG_image.jpeg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.container::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
/* Style Text Content */
.text-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
text-shadow: 2px 2px 5px #0059ff;
letter-spacing: 2px;
z-index: 10;
}
.text-content h4 {
font-size: 3rem;
margin-bottom: 1rem;
}
.text-content p {
font-size: 1.5rem;
font-style: italic;
font-weight: lighter;
width: 80%;
}
/* Style Snowballs */
.snow-ball-container .snow-ball {
position: absolute;
border-radius: 50%;
background: white;
}
.snow-ball-container .snow-ball:nth-child(even) {
width: 16px;
height: 16px;
animation: flake-motion 15s linear infinite;
}
/* Position the Snowballs above the screen */
.snow-ball-container .snow-ball:nth-child(1) {
top: -50%;
left: 5%;
width: 20px;
height: 20px;
animation: snowball-animation 12s linear 2s infinite;
}
.snow-ball-container .snow-ball:nth-child(2) {
top: -20%;
left: 10%;
}
.snow-ball-container .snow-ball:nth-child(3) {
top: -50%;
left: 15%;
animation: snowball-animation 12s linear infinite;
}
.snow-ball-container .snow-ball:nth-child(4) {
top: -10%;
left: 20%;
}
.snow-ball-container .snow-ball:nth-child(5) {
top: -20%;
left: 25%;
width: 20px;
height: 20px;
animation: snowball-animation 12s linear 2s infinite;
}
.snow-ball-container .snow-ball:nth-child(6) {
top: -40%;
left: 30%;
}
.snow-ball-container .snow-ball:nth-child(7) {
top: -30%;
left: 35%;
width: 5px;
height: 5px;
animation: snowball-animation 12s linear infinite;
}
.snow-ball-container .snow-ball:nth-child(8) {
top: -20%;
left: 40%;
}
.snow-ball-container .snow-ball:nth-child(9) {
top: -50%;
left: 45%;
width: 5px;
height: 5px;
animation: snowball-animation 12s linear 2s infinite;
}
.snow-ball-container .snow-ball:nth-child(10) {
top: -5%;
left: 50%;
}
.snow-ball-container .snow-ball:nth-child(11) {
top: -20%;
left: 60%;
animation: snowball-animation 12s linear infinite;
}
.snow-ball-container .snow-ball:nth-child(12) {
top: -10%;
left: 70%;
}
.snow-ball-container .snow-ball:nth-child(13) {
top: -50%;
left: 80%;
width: 5px;
height: 5px;
animation: snowball-animation 12s linear 2s infinite;
}
.snow-ball-container .snow-ball:nth-child(14) {
top: -20%;
left: 90%;
}
.snow-ball-container .snow-ball:nth-child(15) {
top: -50%;
left: 95%;
width: 30px;
height: 30px;
animation: snowball-animation 12s linear infinite;
}
/* Define animations of Snowball and Snowflakes */
@keyframes snowball-animation {
0% {
transform: translate(0);
opacity: 1;
}
20% {
transform: translate(4px, 100px);
opacity: 0.8;
}
40% {
transform: translate(-7px, 200px);
opacity: 0.7;
}
60% {
transform: translate(10px, 400px);
opacity: 0.5;
}
80% {
transform: translate(-14px, 700px);
opacity: 0.2;
}
100% {
transform: translate(16px, 900px);
opacity: 0;
}
}
@keyframes flake-motion {
0% {
transform: translate(-2px, 0);
opacity: 1;
}
20% {
transform: translate(-9px, 200px);
opacity: 0.9;
}
40% {
transform: translate(14px, 300px);
opacity: 0.7;
}
60% {
transform: translate(-22px, 400px);
opacity: 0.6;
}
80% {
transform: translate(30px, 600px);
opacity: 0.5;
}
90% {
transform: translate(-40px, 800px);
opacity: 0.3;
}
100% {
transform: translate(52px, 1000px);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="text-content">
<h4>Snowfall Animation</h4>
<p>Welcome to GeeksforGeeks Learning!</p>
</div>
<div class="snow-ball-container">
<div class="snow-ball"></div>
<div class="snow-ball"></div>
<div class="snow-ball"></div>
<div class="snow-ball"></div>
<div class="snow-ball"></div>
<div class="snow-ball"></div>
<div class="snow-ball"></div>
<div class="snow-ball"></div>
<div class="snow-ball"></div>
<div class="snow-ball"></div>
<div class="snow-ball"></div>
<div class="snow-ball"></div>
<div class="snow-ball"></div>
<div class="snow-ball"></div>
<div class="snow-ball"></div>
</div>
</div>
</body>
</html>
Output:
Similar Reads
Fading Text Animation Effect Using CSS3 The fading text animation effect is one of the most demanding effects on UI/UX designing. This effect can be achieved by using HTML5 and CSS3. In the fading text effect, whenever we load the window, the text will slowly start disappearing. We can implement this effect using the animation property in
2 min read
How to create a Snowfall Animation Effect using p5.js ? In this article, we are going to see how to create a snow-falling animation using p5.js. p5.js is a JavaScript library that helps in creating graphics that users can interact with and is easy to use and helps in visualizing different kinds of graphics and animations. This article will show you how t
3 min read
Underline Hover Animation Effect using Tailwind CSS The Tailwind CSS underline animation is a visual effect that can be added to any text or heading or a specific word in the web page using the Tailwind CSS utility framework. The basic function of this effect is this creates an underline animation from left to right with a smooth transition, in simpl
3 min read
How to create a marquee effect using CSS ? In this article, we will be creating the marquee effect by using HTML and CSS. This effect can be created by using the <marquee> tag in HTML, but we will not use this tag as it is not widely used nowadays. We will create and design a marquee effect by using the CSS classes and styling properti
2 min read
How to Create Jumping Text 3D Animation Effect using CSS ? In this article, you will learn to implement Jumping Texts animation effect using simple HTML and CSS. HTML is used to create the structure of the page and CSS is used to set the styling. HTML Code: In this section, we will design the basic structure of the body. html <!DOCTYPE html> <html
4 min read
How to create text-fill animation using CSS ? A text-fill animation using CSS is a visual effect where the content of text gradually fills with a color, gradient, or pattern over time. This animation can create dynamic, eye-catching effects for headings or titles by adjusting properties like background-size, clip-path, or keyframe animations.Ap
2 min read