Let's light it 🔥 up!

A small post to show how flame animation can take your emoji to next level!

Subscribe to my newsletter and never miss my upcoming articles

In previous post, we saw how amazing it is to use animation with wave 👋 emoji! In this post, we will try to achieve the same for flame 🔥 emoji!

Below is the CSS code:

:root {
  --flame-size: 100;
}

@keyframes flame-animation {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.75) rotate(0) scale(1);
  }
  25% {
    opacity: 0.35;
    transform: translate3d(0, -10%, 0) scale(1) rotate(-3deg) scale(1.05);
  }
  50% {
    opacity: 0.35;
    transform: translate3d(0, -4%, 0) scale(1) rotate(3deg) scale(1.1);
  }
  75% {
    opacity: 0.35;
    transform: translate3d(0, -20%, 0) scale(1) rotate(-3deg) scale(1.05);
  }
  99% {
    opacity: 0;
    transform: translate3d(0, -50%, 0) scale(0.8) rotate(0) scale(1);
  }
}

.fire {
  position: relative;
  display: inline-block;
}

.flame {
  position: absolute;
  transform-origin: 70% 70%;
  z-index: 2;
  display: inline-block;
  top: calc(var(--flame-size) * -1px);
}

.flame.animate {
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-name: flame-animation;
  opacity: 0;
  z-index: 1;
  transform: translate3d(0, 15px, 0) scale(0.75) rotate(0);
  z-index: 1;
  animation-timing-function: ease-in;
}

.flame.animate:nth-child(2) {
  animation-delay: 0.5s;
}
.flame.animate:nth-child(3) {
  animation-delay: 1s;
}

And here is the HTML:

<div class="container">
  <p>
    Light up
    <span class="fire">
      <span class="flame base">🔥</span>
      <span class="flame animate">🔥</span>
      <span class="flame animate">🔥</span>
      <span class="flame animate">🔥</span>
    </span>
  </p>
</div>

You can also look at the output of above code on below codepen:

I know above doesn't exactly look like actual flame, but I think it's good to start with at-least!

Let me know your thoughts and feedbacks in the comments section.

Happy Coding!!!

🌲 ğŸŒž 😊

No Comments Yet