DEV Community

Cover image for Let's light it πŸ”₯ up!
Dharmen Shah
Dharmen Shah

Posted on β€’ Originally published at dev-to-uploads.s3.amazonaws.com

5 3

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

🌲 🌞 😊

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (1)

Collapse
 
alyrik profile image
Kiryl Anokhin β€’ β€’ Edited

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay