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!!!
π² π π
Top comments (1)
Hereβs the alternative way :)
P.S. Best look with Apple style emoji.