Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Snowfall Animation Effect using CSS
We can create an animation using HTML and CSS. When we add animation to the webpage, it improves the UX of the application. We can create various animations using the CSS keyframes property and use it using the 'animation' CSS property.
In this tutorial, we will learn to create a snowfall animation effect using CSS.
Syntax
.snow {
animation: snow 7s linear infinite;
}
.snow:nth-child(2) {
left: 20%;
animation-delay: 1s;
}
@keyframes snow {
0% { transform: translateY(-100vh); }
100% { transform: translateY(100vh); }
}
In the above syntax, we have created the 'snow' class and added the 'snow' keyframes as a value of the animation. We can set the animation delay and left position for every 'snow' div using the nth-child CSS property.
Example 1: Pure CSS Snowfall Effect
In the example below, we have created multiple div elements with the 'snow' class name. We initially set fixed width and height for the snow element and added the snow animation to move the div element creating a snowfall effect. Each snow element has different dimensions, opacity, and animation delays to create a realistic effect
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: linear-gradient(135deg, #1e3c72, #2a5298);
height: 100vh;
margin: 0;
overflow: hidden;
position: relative;
}
h2 {
color: white;
text-align: center;
padding: 20px;
}
.snow {
position: absolute;
top: -50px;
width: 15px;
height: 15px;
border-radius: 50%;
background: white;
animation: snow 7s linear infinite;
}
.snow:nth-child(1) {
left: 10%;
opacity: 0.3;
width: 10px;
height: 10px;
animation-delay: 0s;
}
.snow:nth-child(2) {
left: 20%;
opacity: 0.5;
animation-delay: 1s;
}
.snow:nth-child(3) {
left: 30%;
width: 8px;
height: 8px;
animation-delay: 2s;
}
.snow:nth-child(4) {
left: 40%;
width: 12px;
height: 12px;
animation-delay: 1.5s;
}
.snow:nth-child(5) {
left: 50%;
opacity: 0.7;
animation-delay: 4s;
}
.snow:nth-child(6) {
left: 60%;
opacity: 0.3;
width: 18px;
height: 18px;
animation-delay: 3s;
}
.snow:nth-child(7) {
left: 70%;
opacity: 0.9;
width: 14px;
height: 14px;
animation-delay: 2.5s;
}
.snow:nth-child(8) {
left: 80%;
opacity: 0.6;
animation-delay: 5s;
}
@keyframes snow {
0% {
transform: translateX(0) translateY(-100vh);
}
100% {
transform: translateX(50px) translateY(100vh);
}
}
</style>
</head>
<body>
<h2>Snowfall Animation Effect using CSS</h2>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>
</body>
</html>
A blue gradient background with white circular snowflakes falling from top to bottom at different speeds and positions, creating a realistic snowfall animation effect.
Example 2: Enhanced Snowfall with More Snowflakes
In this example, we create a more dense snowfall effect with additional snowflakes and varied animation durations
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #0f4c75;
height: 100vh;
margin: 0;
overflow: hidden;
position: relative;
}
h2 {
color: white;
text-align: center;
padding: 20px;
font-family: Arial, sans-serif;
}
.snowflake {
position: absolute;
top: -10px;
color: white;
font-size: 1em;
animation: fall linear infinite;
}
.snowflake:nth-child(odd) {
animation-duration: 8s;
}
.snowflake:nth-child(even) {
animation-duration: 12s;
}
.snowflake:nth-child(3n) {
font-size: 1.5em;
animation-duration: 15s;
}
@keyframes fall {
0% {
transform: translateY(-100vh) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
</style>
</head>
<body>
<h2>Enhanced Snowfall Animation</h2>
<div class="snowflake" style="left: 10%; animation-delay: 0s;">?</div>
<div class="snowflake" style="left: 20%; animation-delay: 1s;">?</div>
<div class="snowflake" style="left: 30%; animation-delay: 2s;">?</div>
<div class="snowflake" style="left: 40%; animation-delay: 3s;">?</div>
<div class="snowflake" style="left: 50%; animation-delay: 1.5s;">?</div>
<div class="snowflake" style="left: 60%; animation-delay: 2.5s;">?</div>
<div class="snowflake" style="left: 70%; animation-delay: 4s;">?</div>
<div class="snowflake" style="left: 80%; animation-delay: 0.5s;">?</div>
<div class="snowflake" style="left: 90%; animation-delay: 3.5s;">?</div>
</body>
</html>
A dark blue background with white snowflake symbols (?, ?, ?) falling from top to bottom while rotating, creating a dense and realistic snowfall effect with varying speeds and sizes.
Conclusion
CSS keyframes provide an effective way to create snowfall animations. By combining transform properties, animation delays, and nth-child selectors, you can create realistic falling snow effects that enhance your webpage's visual appeal.
855 Views
