Dancing Petal Badge | code.sinau.dev

🌸 What we're MAKING today: My Dancing Petal Badge

In Poster Studio you styled text with font-size, font-weight, and text-align. In Spell Lab you used transforms like rotate and scale. Today you combine everything and learn the secret superpower that brings code to life: CSS Animations! 🎬

What's an animation? It's code that says "change A into B over time." A spinning coin, a floating heart, a bouncing ball — all animations! You write @keyframes to define the moves, then animation to assign them. Today you'll make a personalized badge that spins, pulses, floats, shakes, or bounces — YOUR choice!

🔗 Remember transforms from Spell Lab? Animations are transforms that happen automatically over time — no clicking needed!

● ● ● badge.css CSS

badge preview LIVE

🌸 Dancing Petal Badge

In Spell Lab you used transforms like rotate and scale to change a sticker — instantly. Today you learn something MAGICAL: CSS Animations make elements change automatically over time!

🎬 CSS Animation Toolkit

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

animation: spin 3s infinite;

@keyframes = the moves. animation = when & how. Simple!

💫@keyframes defines what happens — like a dance choreography. 0% = start, 100% = end!

🎬animation property assigns the moves: animation: spin 3s infinite = "spin over 3 seconds, loop forever!"

🎨You can change name (spin/pulse/float/shake/bounce), speed (1s=fast, 5s=slow), loop (1 or infinite), and color!

🏆Edit the gold boxes in the code → the badge updates live! Hit ✓ Check after each step.

🌸 What we're MAKING today: My Dancing Petal Badge

🌸 Dancing Petal Badge

🎉 Badge Maker!