1. The Bouncing Ball
A simple example showing a ball bouncing up and down using keyframes.
Key Concepts:
- @keyframes definition
- animation-duration
- animation-iteration-count
- transform: translateY()
2. Color Changing Card
A card that changes colors and size to demonstrate multiple property animations.
Key Concepts:
- Multiple properties in keyframes
- Color transitions
- Scale transformations
- Animation timing functions
3. Loading Animation
A professional loading animation using multiple elements and delays.
Key Concepts:
- Animation delays
- Coordinating multiple animations
- Professional animation techniques
4. Path Animation
A ball that follows a square path: up, right, down, left, and stops.
Key Concepts:
- Complex path animations
- animation-fill-mode: forwards
- animation-iteration-count: 1
- Multiple transform translations
5. Sequential Shapes Animation
Three shapes moving in sequence: ball goes up, then square goes down, then rectangle goes right.
Key Concepts:
- Sequential animations using delays
- Multiple elements coordination
- animation-fill-mode: forwards
- Different shape styling