Creating a Snowflake Animation Effect with CSS
Creating Snowflake Animation Effects with CSS
We can create animations using HTML and CSS. When we add animation to a web page, it improves the user experience of the application. We can create various animations using CSS keyframes and the “animation” CSS property.
In this tutorial, we will learn how to create a snowflake animation effect using CSS.
Syntax
Users can follow the syntax below to create a snowflake animation effect using CSS.
<div class = "snow"> </div>
.snow{
animation: snow 7s linear infinite;
}
.snow:nth-child(2) {
left: 20%;
animation-delay: 1s;
}
In the syntax above, we create div elements with the “snowflake” class name and add the “snowflake” keyframes as the animation values to them. In addition, we can set the animation delay and left position for each “snowflake” div using the nth-child CSS property.
Example 1
In the following example, we create multiple div elements with the “snowflake” class name in HTML. In CSS, we initially set a fixed width and height for the snowflake elements. In addition, we set the background and position for each snowflake element.
We add snowflake animation to move the div elements and create the effect of falling snow. We also customized each snowflake element, changing its size, opacity, and left position.
Furthermore, we set an animation delay for each snowflake element. This way, we can see the snowflake elements falling on the screen at different times.
<html>
<head>
<style>
* {background-color: darkblue; color: white;}
/* Add snow animation */
.snow {
position: absolute;
top: -50px;
left: -50px;
width: 15px;
height: 15px;
border-radius: 50%;
background: white;
animation: snow 7s linear infinite;
} .snow:nth-child(1) {
left: 10%;
opacity: 0.3;
height: 10px;
width: 10px;
animation-delay: 0s;
}
.snow:nth-child(2) {
left: 20%;
opacity: 0.5;
animation-delay: 1s;
}
.snow:nth-child(3) {
left: 30%;
height: 5px;
width: 10px;
animation-delay: 2s;
}
.snow:nth-child(4) {
left: 40%;
height: 8px;
width: 13px;
animation-delay: 1s;
}
.snow:nth-child(5) { left: 50%;
opacity: 0.7;
animation-delay: 4s;
}
.snow:nth-child(6) {
left: 60%;
opacity: 0.3;
height: 20px;
width: 13px;
animation-delay: 8s;
}
.snow:nth-child(7) {
left: 70%;
opacity: 0.9;
height: 17px;
width: 10px;
animation-delay: 6s;
}
.snow:nth-child(8) {
left: 80%;
opacity: 0.6;
animation-delay: 7s;
}
.snow:nth-child(9) {
left: 90%; height: 12px;
width: 12px;
animation-delay: 5s;
}
.snow:nth-child(10) {
left: 80%;
height: 22px;
width: 16px;
animation-delay: 9s;
}
@keyframes snow {
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(80px) translateY(1000px);
}
}
</style>
</head>
<body>
<h2> Add snowflake animation effects using HTML and 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>
<div class = "snow"> </div>
<div class = "snow"> </div>
</body>
</html
Example 2
In the following example, we use the “Jquery-snowfall” library to create a snow effect with jQuery. We add the library using a CDN in the <head> section.
In jQuery, we call the snowfall() method to create the snow effect. We also pass some parameters to the snowfall() method.
In the output, users can observe a snowflake effect, which is better than the above example.
<html>
<head>
<style>
* {
color: blue;
}
.snow-fall {
height: 600px;
width: 600px;
background-color: blue;
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"> </script>
</head>
<body>
<h2> Adding Snowflake Animation with HTML and jQuery </h2>
<div class = "snow-fall"> </div>
<script>
$('.snow-fall').snowfall({ flakeCount: 500, maxSpeed: 2, maxSize: 10 });
</script>
</body>
</html>
Users learned two different ways to create a falling snow effect. In the first method, we used only HTML and CSS. Developers will notice that the code is quite complex and difficult to read, as it requires creating each snowflake element and manipulating it with CSS. In the second method, we used an external third-party library like jQuery to create the snowflake effect.