Happy Birthday Confetti Animation

— 8 minute read

Happy birthday to me! Yes, today is my birthday, and since it's a lockdown, I wanted to make an online party popper so everyone can celebrate with me! At first, I thought about doing one in Canvas, but that would take a lot of time to explain. So this one is easy to build and pure CSS!

HTML Structure permalink

<div class="container">
<div class="hoverme">
<h1>
Birthday Hover 🎂
</h1>
<i></i>
<i></i>
<i></i>
... (50x)
</div>
</div>

So what we got here is our usual flex centered container. And inside we have a div which will act as our hover element. In there we have a default heading and fifty times a <I> element. This is the element that is our confetti.

CSS Only Confetti Popper permalink

.hoverme {
width: 240px;
text-align: center;
padding: 10px 0;
cursor: pointer;
position: relative;
h1
{
color: #fff;
font-size: 1.5em;
}
i {
position: absolute;
display: block;
left: 50%;
top: 0;
width: 5px;
height: 10px;
background: red;
opacity: 0;
}
&:hover {
@for $i from 1 through 50 {
i:nth-of-type(#{$i}) {
transform: translate3d(random(190) - 100 + px, random(200) - 100 + px, 0)
rotate(random(360) + deg);
background: hsla(random(360), 100%, 50%, 1);
animation: bang 700ms ease-out forwards;
opacity: 0;
}
}
}
}
@keyframes bang {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}

As for the CSS we are using SCSS to use variables so we don't have to type 50 times. Let's walk through this in more detail and see what's happening.

.hoverme {
width: 240px;
text-align: center;
padding: 10px 0;
cursor: pointer;
position: relative;
}

This is our main element, we center it add some padding and show a pointer as our cursor. We also make this a relative div to place our absolute confetti in.

i {
position: absolute;
display: block;
left: 50%;
top: 0;
width: 5px;
height: 10px;
background: red;
opacity: 0;
}

Then for our I elements we make them absolute positioned and make them invisible by setting opacity: 0

&:hover {
@for $i from 1 through 50 {
i:nth-of-type(#{$i}) {
transform: translate3d(random(190) - 100 + px, random(200) - 100 + px, 0)
rotate(random(360) + deg);
background: hsla(random(360), 100%, 50%, 1);
animation: bang 700ms ease-out forwards;
opacity: 0;
}
}
}

The hover is where the main magic will happen. So we use CSS variables to loop through fifty numbers (the amount of I we have). Then for each element we do a random transform, the transform will place them somewhere random from the center of our hover div. Then we give it a random color and add our animation.

@keyframes bang {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}

So for the bang animation we transform our elements from position zero and start with full opacity.

This will result in the following:

See the Pen Happy Birthday Confetti Animation by Chris Bongers (@rebelchris) on CodePen.

Happy Birthday to me! permalink

Again, thank you for reading my blog, that is honestly the best birthday present ever, and I hope if you ever have questions, remarks you feel free to reach out to me. 🤟

Thank you for reading, and let's connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter