Collection of free HTML and CSS fire animation code examples

A CSS Candle Animation

The candle is made up of several parts, each represented by a different div element with a unique class. The animation of the flame is achieved using the g-ball class. This class is applied to 200 div elements, each representing a small part of the flame. These elements are animated to move upwards, creating the illusion of a flickering flame. The mix-blend-mode: screen property is used to blend the colors of the flame elements together, enhancing the visual effect.

Animating a Campfire Scene with CSS

The flames are created using CSS pseudo-elements and borders to form triangles, which are then colored to resemble fire. The flames also have an opacity set to give them a more realistic, glowing effect. The animation of the flames and the smoke is achieved using CSS keyframes. The flicker animation applies a rotation and scale transformation to the flames, creating a flickering effect. The dash animation is applied to the smoke path, creating the illusion of rising smoke. The code also uses CSS variables for colors, allowing for easy customization of the scene. The use of absolute positioning and z-index properties helps layer the elements correctly to create depth in the scene.

Fire Animation in CSS

This snippet of CSS code is a perfect example of how to create a realistic fire animation using keyframes. The code defines two animations: fire and spark. The fire animation uses the scaleY transformation to change the vertical size of the flame elements, creating the illusion of flickering flames. The animation alternates between different scaling factors at different percentages of the animation duration, which gives the flame its dynamic, natural movement. The spark animation, on the other hand, simulates the random, fleeting nature of sparks. It uses the scaleY transformation to change the size of the spark elements and the translateY transformation to move them upward. The opacity property is also animated to make the sparks appear and disappear, enhancing the realism of the animation.

A CSS-only Fire

The fire effect is achieved using multiple background images on pseudo-elements ::before and ::after of the .fire class. These images include a glitter texture and two gradients - a linear one to create the flame and a radial one for the ember effect. The background-blend-mode property is used to blend these images together, creating a realistic fire effect. The animation is created using the @keyframes rule, which changes the background-position of the images, giving the illusion of a flickering flame. The filter property is used to adjust the brightness, blur, and contrast of the fire, enhancing the overall effect.

Play With Fire - Box Shadow Flames & Keyframes Animation

Burning Match

Sparks Float Up From A Blazing Fire

CSS Animation of sparks floating up from a blazing fire.

SCSS Candle

Flame Animation

Litte CSS animation with SVG.

One Div Flame

Animated flame with HTML one div and CSS animation.

Fahrenheit 451 - Fire

Lots of box shadows used to make the burn hole.

Fireplace

What is it about a fireplace that draws you to its flame? Is it the warmth created like a sun that came and shone upon your body with the intensity of heat? Or is it the comfortable feeling which makes you feel replete? The flicker and the crackle, the sizzle that you hear invites your senses to remain close to the hearth and peer hypnotically tranquilized quietly taking a rest like a bird in sunshine in a cozy, cozy nest.

Campfire Animation

No image pixelart campfire animation. CSS box-shadow only.

CSS Animated Christmas Candles

Cake and Candle

Campfire: Pure CSS

CSS Spark

Fire

Responsive CSS bonfire.

Fire

A pure CSS campfire.

CSS Blend Mode Fire

CSS Candle Flame Animation

Animated candle flame with pure CSS.

Only CSS: Fire

Simple CSS-Only Fire Animation

Simple animation of fire using plain HTML & CSS3.

Animated Fire with SVG + CSS

CSS Fire

Completely relative fire animation based off of https://dribbble.com/shots/2651843-Fire-loader

SVG CSS Fire Animation

Fire in HTML and CSS

CSS Flame Animation

An animated flame using only CSS3 animations and box-shadow.