This content originally appeared on DEV Community and was authored by Dharmen Shah
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!!!
? ? ?
This content originally appeared on DEV Community and was authored by Dharmen Shah
Dharmen Shah | Sciencx (2021-04-23T17:23:04+00:00) Let’s light it ? up!. Retrieved from https://www.scien.cx/2021/04/23/lets-light-it-%f0%9f%94%a5-up/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.