A comprehensive collection of web animation projects and exercises, covering everything from basic CSS transitions to advanced Web Animation APIs and modern View Transitions.
- Animations Basics: Fundamental CSS keyframe animations.
- Transitions: Mastering CSS transitions and state changes.
- Timing Functions: Exploration of easing, cubic-bezier, and steps.
- Scroll-Driven Animations: Modern animations that react to page scrolling.
- Web Animations API (WAAPI): Controlling animations directly via JavaScript.
- View Transitions API: Seamless transitions between different states or pages.
- Words Game: A fully functional "Guess the Word" game using CSS animations for feedback and UI polish.
- Exercises:
- Exercise 1: Interactive character jump mechanics.
- Exercise 2: Advanced positioning and animation timing.
- Exercise 3: Complex layout animations.
- HTML5 / CSS3: Modern styling and keyframe animations.
- JavaScript: For interactive logic and Web Animation API control.
- Vanilla CSS: No frameworks, focusing on core web standards.
- Clone the repository.
- Open
index.htmlin the root directory using a local web server (like VS Code Live Server) to see the full directory of projects. - Explore the individual folders to see the source code for each animation technique.