Candle animation

• 

  candle animation

Inspiration

The flicker of candlelight has always symbolized warmth, peace, and emotion. Inspired by this, I wanted to animate a playful and symbolic interaction where a big candle blows out a small one, and the little candle relights itself, only to be blown out again. It's a visual metaphor for resilience and persistence, brought to life with HTML and CSS.

What it does

This animation features two candles: A big candle that "blows" air. A small candle that keeps lighting up and getting blown out. The loop creates a story: the little candle lights up, the big one blows it out, and the small one sparks back to life repeating endlessly.

How we built it

HTML: Structured the big and small candles using divs for the body, flame, and face expressions. CSS: Used @keyframes to animate the candle flames, blowing action, and relighting sequence. Timing delays helped create a realistic and smooth cycle of events.

Challenges we ran into

Synchronizing the animations to tell a story using only HTML and CSS. Making the flame look natural while being turned off and on. Creating a blowing effect without JavaScript all done with creative CSS.

Accomplishments that we're proud of

Built an expressive, story-driven animation using only HTML and CSS. Managed realistic flame behavior and character interaction through pure styling. Gave "life" and personality to candles using simple shapes and animations.

What we learned

Advanced CSS animations using keyframes, opacity, scale, and transform. How to use delays and sequencing to simulate interaction between elements. Creativity in storytelling through motion and visuals all with minimal co

What's next for Candle animation

Add interactive behavior: let users click to light or blow out candles. Include smoke trails and sound effects using JavaScript. Animate facial expressions and create more characters for a fun short animation. Turn it into a cozy animated greeting or a digital card.

Built With

• css
• html