CSS Intro to Animation

A hands-on lab introducing fundamental CSS animation concepts through 7 interactive playgrounds.

Overview

This lab teaches CSS animations progressively through practical exercises. Students work through 7 "playgrounds" - each focusing on specific animation techniques and building complexity gradually.

Learning Objectives

• Understand keyframe animations with @keyframes
• Master transform properties (translate, scale, rotate)
• Control animation timing, delays, and repetition
• Coordinate multiple animations
• Apply animations for enhanced user experience

Lab Structure

Duration: ~3 hours
Difficulty: Beginner-friendly
Format: Guided practice with TODO instructions

Playground	Focus	Time
1. Bouncing Ball	Basic keyframes & transforms	~20 min
2. Fading Ghost	Opacity animations & shapes	~20 min
3. Growing Flower	Scale transforms & delays	~25 min
4. Color-Changing Chameleon	Color animations	~25 min
5. Spinning Wheel	Rotation & infinite loops	~20 min
6. Glowing Button	Shadows & filters	~25 min
7. Dancing Squares	Multi-element coordination	~30 min

Getting Started

1. Navigate to the lab/ directory
2. Open index.html in your browser
3. Follow the detailed instructions in lab/README.md
4. Work through each playground's CSS file in order
5. Run npm test to check if your tasks pass

Prerequisites

• Basic CSS knowledge (selectors, properties, values)
• Text editor
• Modern web browser

---

For detailed instructions and step-by-step guidance, see lab/README.md.