Candle Animation

 CANDLE ANIMATION

Today I'm going to show you how to make this simple candle animation by using HTML & CSS

OUTPUTS : 

CANDLE HISTORY :

There is evidence that the earliest candles were made from whale fat in China during the Qin Dynasty, some 200 years B.C. In India, about the same time, they were made from wax that was a residue of boiling cinnamon.

Wick was also improved. It was made from paper, flax, hemp and cotton with different times of burning and with necessity to trim wicks to the braided cotton, wicks infused with chemicals that control speed of burning and wicks that coil when burn and with that trim themselves.

Although not a major light source now, candles are still here as a decorative items and a light source in emergency situations. They are used for celebrations (birthdays, religious rituals), for making atmosphere (dinners and other occasions; plain, coloured and scented) and as a décor.

Why is a candle important?

                   The candle symbolizes light in the darkness of life especially individual life, illumination; it is the symbol of holy illumination of the spirit of truth. Lit in times of death, they signify the light in the next world, and they represent Christ as the light.

STEPS TO CREATE :

• Create a New file and name it as Candle.html       
• Divide a section and named the class name as Container
• Insert all the sections and classes within the container
• Then create three new classes and name it as candle, thread & fire
• Now adding styles to all the classes
• Here i am using internal style sheet
• Add some CSS Animations to the fire class  
• I teach that procedures by step by step process
• Watch this tutorial and starts to coding : https://youtu.be/L3QSkf6D7XE      
• Now the candle animation is to be ready
• I hope you learned something new from this tutorial...

SOURCE CODES : Click here to download

or