Follow

Follow
Let's light it ๐Ÿ”ฅ up!

Let's light it ๐Ÿ”ฅ up!

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

Dharmen Shah's photo
Dharmen Shah
ยทApr 23, 2021ยท

2 min read

Play this article

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

๐ŸŒฒ ๐ŸŒž ๐Ÿ˜Š

Did you find this article valuable?

Support Dharmen Shah by becoming a sponsor. Any amount is appreciated!

See recent sponsors |ย Learn more about Hashnode Sponsors
ย 
Share this