What it shows
CSS keyframes make a flame flicker and a greeting fade in with no JavaScript. It shows how animation is described by start and end states.
The science
A CSS animation changes a property from one value to another over time. The @keyframes rule names the animation and lists its states; the animation property on an element says the name, duration, and how often it repeats. With infinite and alternate, the flame grows and shrinks back and forth, which looks like a flicker. Border-radius with different values makes a drop shape.
Materials
Cost: free. Many items come from home or from waste; spare parts such as LEDs, motors and wire are in the store.
- A computer, laptop or phone with a browser (free)
- A text editor and a web browser (free)
- A notebook and a pencil
Safety
This project uses safe, everyday materials. Still, read the rules below with a parent before you start.
Never use mains electricity: power models with cells, batteries or a low-voltage adapter. Sharp and hot tools, flames and lab chemicals need an adult or your teacher beside you. Keep magnets, button cells and small parts away from young children, and wash your hands after making.
All the safety rulesStep by step
8 steps. Do them in order, and test each part before you go on to the next. Write what you notice in a notebook as you go.
Create card.html with body containing <h1>Happy Diwali</h1>, <div class="diya"><div class="flame"></div><div class="bowl"></div></div> and a <p>May your home be bright.</p>.
Add a <style> block and write body { background: #1a1033; color: #ffe9a8; text-align: center; font-family: Georgia, serif; }.
Style the bowl: .bowl { width: 100px; height: 40px; background: #b5651d; border-radius: 0 0 100px 100px; margin: 0 auto; }.
Style the flame: .flame { width: 24px; height: 50px; background: orange; margin: 0 auto -6px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: 0 0 30px 10px gold; animation: flicker 0.8s infinite alternate; }.
Write the keyframes: @keyframes flicker { from { transform: scale(1); opacity: 1; } to { transform: scale(1.2, 1.1); opacity: 0.8; } }.
Make the heading fade in with h1 { animation: fade 3s; } and @keyframes fade { from { opacity: 0; } to { opacity: 1; } }.
Open the page, watch the flame, and change 0.8s to 0.3s to see the effect of duration.
Add two more diyas by copying the div, and give each a different animation-delay such as 0.2s so they do not flicker together.
What you should see
The title fades in and a diya with a glowing flame pulses continuously on a dark background. Changing the duration or delay changes the flicker.
Viva questions
A teacher or a judge will ask how it works. Try to answer each question before you open it, then compare.
1What does @keyframes define?
The states of an animation from start to end.
2What does infinite do?
It repeats the animation forever.
3What does alternate do?
It plays the animation forwards and then backwards.
4Why use animation-delay?
To start copies at different times so they look natural.
Take it further
Add a button that uses JavaScript to turn the diya off by changing the flame’s display style.
Change one thing, measure what happens, and add a table or chart of your readings: that is what turns a model into your own investigation.
Free ebooks for this project
Computer & office
Computer Fundamentals Study Book
The complete study notes, practice questions and glossary for Computer Fundamentals
English & skills
Handbook for Computer Teachers
Plan lessons, run a computer lab and help every student learn