BitWithBite
HTML & CSS Worksheet
🎨 Transitions & Animations
SCORE___ / 20
NameClassDate
After this worksheet you can
transition on hoverkeyframes animationstransform moves/scalesPerformance basics📚 Quick Recap
Motion is what separates a static page from a living interface. CSS gives you two tools: transitions for state changes (hover, focus, active) and @keyframes animations for complex, looping, or auto-playing motion. In this lesson you'll master both — plus transform functions, timing functions, and the golden rules of performance-safe animation.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Smooth hover changes use:
2Multi-step animations use:
3Move/rotate/scale with:
4Cheapest properties to animate:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5transition: all .3s adds smoothing (timing function).
6transform: (1.1) grows an element 10%.
7Button grows slightly on hover - CSS?
8Write a fade-in keyframes animation.
9Why animate transform, not left/top?
🚀 Section C · Challenge ● CHALLENGE 5
10What does animation-delay do?
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-A 2-A 3-A 4-A | 5 ease 6 scale 7 = .btn{transition:transform .2s} .btn:hover{transform:scale(1.05)} 8 = @keyframes fade{from{opacity:0}to{opacity:1}} .x{animation:fade .5s} 9 = GPU-accelerated - smoother, no layout recalcs | 10 = Waits before the animation starts