Create Fireworks Animation Using CSS
Hello Coder, Welcome to the Codewithrandom blog. In this article, We create a Fireworks Animation Using CSS.
A CSS effect called fireworks animation is just something we make with CSS principles. With the aid of CSS, we can add fire flames to fireworks animation, which look gorgeous and give the display a genuine appearance.
Preview Of Firwork Animation with CSS:-
50+ HTML, CSS & JavaScript Projects With Source Code
I hope you enjoy our blog so let’s start with a basic HTML structure for the Fireworks Animation.
| Code by | Alvaro Montoro |
| Project Download | Link Available Below |
| Language used | HTML and CSS |
| External link / Dependencies | NO |
| Responsive | YES |
Html Code For Fireworks Animation:-
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fireworks Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="firework"></div>
<div class="firework"></div>
<div class="firework"></div>
</body>
</html>Structure for our firework animations:
To add structure, we’ll only use the div element to make three containers, and then we’ll use CSS to make fireworks using these containers. To allay your concerns and assist in comprehending the CSS ideas, we will be introducing the fireworks animation step by step.
There is all HTML code for the Fireworks Animation. Now, you can see output without CSS, then we write CSS for the Fireworks Animation.
Portfolio Website using HTML and CSS (Source Code)
HTML Code Output:-
Css Fireworks Animation Code:-
body {
background:
linear-gradient(#0007, #0000),
#123;
margin: 0;
height: 100vh;
overflow: hidden;
}
@keyframes firework {
0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; }
50% { width: 0.5vmin; opacity: 1; }
100% { width: var(--finalSize); opacity: 0; }
}
/* @keyframes fireworkPseudo {
0% { transform: translate(-50%, -50%); width: var(--initialSize); opacity: 1; }
50% { width: 0.5vmin; opacity: 1; }
100% { width: var(--finalSize); opacity: 0; }
}
*/
.firework,
.firework::before,
.firework::after
{
--initialSize: 0.5vmin;
--finalSize: 45vmin;
--particleSize: 0.2vmin;
--color1: yellow;
--color2: khaki;
--color3: white;
--color4: lime;
--color5: gold;
--color6: mediumseagreen;
--y: -30vmin;
--x: -50%;
--initialY: 60vmin;
content: "";
animation: firework 2s infinite;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, var(--y));
width: var(--initialSize);
aspect-ratio: 1;
background:
/*
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 0%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 0%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 100%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 100%,
*/
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%,
radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%,
radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%,
/* bottom right */
radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%,
radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%,
radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%,
radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%,
/* bottom left */
radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%,
radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%,
radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%,
radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%,
radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%,
radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,
/* top left */
radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%,
radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%,
radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%,
radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%,
radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%,
/* top right */
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%,
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%
;
background-size: var(--initialSize) var(--initialSize);
background-repeat: no-repeat;
}
.firework::before {
--x: -50%;
--y: -50%;
--initialY: -50%;
/* transform: translate(-20vmin, -2vmin) rotate(40deg) scale(1.3) rotateY(40deg); */
transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);
/* animation: fireworkPseudo 2s infinite; */
}
.firework::after {
--x: -50%;
--y: -50%;
--initialY: -50%;
/* transform: translate(44vmin, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); */
transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);
/* animation: fireworkPseudo 2s infinite; */
}
.firework:nth-child(2) {
--x: 30vmin;
}
.firework:nth-child(2),
.firework:nth-child(2)::before,
.firework:nth-child(2)::after {
--color1: pink;
--color2: violet;
--color3: fuchsia;
--color4: orchid;
--color5: plum;
--color6: lavender;
--finalSize: 40vmin;
left: 30%;
top: 60%;
animation-delay: -0.25s;
}
.firework:nth-child(3) {
--x: -30vmin;
--y: -50vmin;
}
.firework:nth-child(3),
.firework:nth-child(3)::before,
.firework:nth-child(3)::after {
--color1: cyan;
--color2: lightcyan;
--color3: lightblue;
--color4: PaleTurquoise;
--color5: SkyBlue;
--color6: lavender;
--finalSize: 35vmin;
left: 70%;
top: 60%;
animation-delay: -0.4s;
}
Step1:We will give our app some fundamental styling using the body tag selector. We’ll add a blue and black linear gradient backdrop using the background property, and the margin is set to “zero.”
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Now, we’ll alter the opacity from 1 to 0 using the “firework” keyframes at three intervals of 0, 50%, and 100%.
body {
background: linear-gradient(#0007, #0000), #123;
margin: 0;
height: 100vh;
overflow: hidden;
}
@keyframes firework {
0% {
transform: translate(var(--x), var(--initialY));
width: var(--initialSize);
opacity: 1;
}
50% {
width: 0.5vmin;
opacity: 1;
}
100% {
width: var(--finalSize);
opacity: 0;
}
}
Step2:The fireworks animation will now be created in this last stage using the class selector fireworks and a variety of colours. When we added colour and position to our CSS, the fireworks motion started after two seconds and went on forever, giving the appearance that actual fireworks were being fired.
10+ Javascript Projects For Beginners With Source Code
.firework,
.firework::before,
.firework::after {
--initialSize: 0.5vmin;
--finalSize: 45vmin;
--particleSize: 0.2vmin;
--color1: yellow;
--color2: khaki;
--color3: white;
--color4: lime;
--color5: gold;
--color6: mediumseagreen;
--y: -30vmin;
--x: -50%;
--initialY: 60vmin;
content: "";
animation: firework 2s infinite;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, var(--y));
width: var(--initialSize);
aspect-ratio: 1;
background: /* radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 0%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 0%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 100% 100%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 0% 100%, */
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%, radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%, radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%, /* bottom right */
radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%, radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%, radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%, radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%, /* bottom left */
radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%, radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%, radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%, radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%, radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%, /* top left */
radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%, radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%, radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%, radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%, radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%, radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%, /* top right */
radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%, radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%;
background-size: var(--initialSize) var(--initialSize);
background-repeat: no-repeat;
}
.firework::before {
--x: -50%;
--y: -50%;
--initialY: -50%;
/* transform: translate(-20vmin, -2vmin) rotate(40deg) scale(1.3) rotateY(40deg); */
transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);
/* animation: fireworkPseudo 2s infinite; */
}
.firework::after {
--x: -50%;
--y: -50%;
--initialY: -50%;
/* transform: translate(44vmin, -50%) rotate(170deg) scale(1.15) rotateY(-30deg); */
transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);
/* animation: fireworkPseudo 2s infinite; */
}
.firework:nth-child(2) {
--x: 30vmin;
}
.firework:nth-child(2),
.firework:nth-child(2)::before,
.firework:nth-child(2)::after {
--color1: pink;
--color2: violet;
--color3: fuchsia;
--color4: orchid;
--color5: plum;
--color6: lavender;
--finalSize: 40vmin;
left: 30%;
top: 60%;
animation-delay: -0.25s;
}
.firework:nth-child(3) {
--x: -30vmin;
--y: -50vmin;
}
.firework:nth-child(3),
.firework:nth-child(3)::before,
.firework:nth-child(3)::after {
--color1: cyan;
--color2: lightcyan;
--color3: lightblue;
--color4: PaleTurquoise;
--color5: SkyBlue;
--color6: lavender;
--finalSize: 35vmin;
left: 70%;
top: 60%;
animation-delay: -0.4s;
}100+ JavaScript Projects With Source Code ( Beginners to Advanced)
We have completed our CSS section, Here is our final updated output CSS.
Final Output Of Fireworks Animation CSS:-
Video Output Of Fireworks Animation Using CSS:
I hope you like the CSS Fireworks Animation, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development.
Age Calculator Using Javascript
Thank you
ADVERTISEMENT
ADVERTISEMENT
Written by – Codewithrandom/Anki
ADVERTISEMENT
Code by – Alvaro Montoro
ADVERTISEMENT
Which code editor do you use for this Fireworks Animation coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
ADVERTISEMENT
is this project responsive or not?
Yes! this project is a responsive project.
Do you use any external links to create this project?
No!
What is CSS Firework Animation?
A CSS effect called fireworks animation is just something we make with CSS principles. With the aid of CSS, we can add fire flames to fireworks animation, which look gorgeous and give the display a genuine appearance.
