Let's light it 🔥 up!

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

🌲 🌞 😊

Comments

[Kiryl Anokhin]

Here’s the alternative way :)
P.S. Best look with Apple style emoji.