Happy Birthday Confetti Animation 🎉

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

<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

.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!

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!

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