BitWithBite
Full-Stack Worksheet
🎭 CSS Variables & Animations
SCORE___ / 20
NameClassDate
After this worksheet you can
Define and use CSS variablesWrite @keyframesUse transition vs animationChoose GPU-friendly properties📚 Quick Recap
🎯 What you'll practice: Custom properties, keyframes, transitions, and transform-based animation.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1A CSS variable is declared with:
2A CSS variable is used with:
3Multi-step animations are defined with:
4The most GPU-friendly properties to animate are:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5CSS variables are typically declared on the selector.
6The property that animates a single property change over time is .
7Declare a --accent variable and use it as a button's background color.
8Write a keyframes animation named fadeIn that goes from opacity 0 to 1.
9Why does animating "top" and "left" cause worse performance than animating "transform: translate()"?
🚀 Section C · Challenge ● CHALLENGE 5
10Design a card hover effect that lifts the card up 4px and adds a shadow, using a smooth transition. Write the full CSS.
💭 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-B 2-B 3-B 4-B | 5 = :root 6 = transition 7 = :root{--accent:#fb923c;} .btn{background:var(--accent);} 8 = @keyframes fadeIn{from{opacity:0;}to{opacity:1;}} 9 = top/left trigger layout recalculation (reflow) on every frame, which is expensive; transform runs on the GPU compositor layer without touching layout | 10 = .card{transition:transform .2s ease, box-shadow .2s ease;} .card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.15);}