Flame Animation using CSS

The following code demonstrates an animated flame created using only CSS3 animations and box-shadow. With a creative twist, the developer aimed to create a fire-like effect using pure CSS. The code consists of a container element that houses several div elements representing different aspects of the flame animation. Each div element is styled with CSS properties to achieve the desired visual effect.

The container element is positioned relative and has a fixed width and height. So, it can animate continuously using the “flicker” animation, which creates a flickering effect reminiscent of a flame. The animation is defined with keyframes that specify different transformations at different percentages of the animation’s duration.

Moreover, the flame itself is achieved by positioning four div elements at the bottom of the container and applying appropriate border radii and transformations. Each div represents a different color of the flame, including yellow, orange, red, and white. They are styled with specific dimensions, background colors, and box shadows to create a realistic appearance.

How to Create Flame Animation using CSS

1. First, create the HTML structure for flame animation as follows:

<div class="container">
  <div class="red flame"></div>
  <div class="orange flame"></div>
  <div class="yellow flame"></div>
  <div class="white flame"></div>
  <div class="blue circle"></div>
  <div class="black circle"></div>
</div>

2. Now, use the following CSS code to style and animate the flame.

body{
  background:black !important;
}
/* An animated flame using only CSS3 animations and box-shadow. Wanted to see if I could make fire with just CSS - flame on! :) */
.container{
  margin:80px auto;
  width: 60px;
  height: 60px;
  position:relative;
  transform-origin:center bottom;
  animation-name: flicker;
  animation-duration:3ms;
  animation-delay:200ms;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.flame{
  bottom:0;
  position:absolute;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  transform:rotate(-45deg) scale(1.5,1.5);
}

.yellow{
  left:15px; 
  width: 30px;
  height: 30px;
  background:gold;
  box-shadow: 0px 0px 9px 4px gold;
}

.orange{
  left:10px; 
  width: 40px;
  height: 40px;
  background:orange;
  box-shadow: 0px 0px 9px 4px orange;
}

.red{
  left:5px;
  width: 50px;
  height: 50px;
  background:OrangeRed;
  box-shadow: 0px 0px 5px 4px OrangeRed;
}

.white{
  left:15px; 
  bottom:-4px;
  width: 30px;
  height: 30px;
  background:white;
  box-shadow: 0px 0px 9px 4px white;
}

.circle{
  border-radius: 50%;
  position:absolute;  
}

.blue{
  width: 10px;
  height: 10px;
  left:25px;
  bottom:-25px; 
  background: SlateBlue;
  box-shadow: 0px 0px 15px 10px SlateBlue;
}

.black{
  width: 40px;
  height: 40px;
  left:10px;
  bottom:-60px;  
  background: black;
  box-shadow: 0px 0px 15px 10px black;
}

@keyframes flicker{
  0%   {transform: rotate(-1deg);}
  20%  {transform: rotate(1deg);}
  40%  {transform: rotate(-1deg);}
  60%  {transform: rotate(1deg) scaleY(1.04);}
  80%  {transform: rotate(-2deg) scaleY(0.92);}
  100% {transform: rotate(1deg);}
}

That’s it! By implementing this code, you can easily add an eye-catching flame animation to your web page using just CSS, without the need for complex JavaScript or external libraries. Whether you want to add a fiery touch to a gaming website or create a visually appealing effect, this Flame Animation using CSS code offers a simple yet effective solution.