Unit 5 Overview

Building on your visual effects knowledge, this unit adds motion and interactivity to your CSS toolkit. You will learn transitions, keyframe animations, modern animation APIs, and how to create engaging, accessible interactive experiences. These skills bring your designs to life and create memorable user experiences.

Part 1: Transitions & Keyframe Animations

Complete the following in the specified order by the due dates listed in Canvas or before the end of the unit if no date is listed:

• CSS Transitions
  Learn core transition properties, timing functions, and common transition patterns, including how to pair transitions with transforms.
• Keyframe Animations and Performance
  Study @keyframes syntax, animation-related properties, and techniques for keeping animations smooth and performant.
• SVG Interactions & Animation
  Learn how to animate SVGs with CSS and create interactive SVG patterns that respond to user input.
• Animated Navigation
  Create a navigation menu with smooth transitions and animations that feels responsive and polished.
• Animated UI Components
  Build animated UI components such as buttons, cards, and modals that use transitions and keyframes to enhance interaction.
• Navigation with Slide-Out Menu
  Create a slide-out navigation menu with smooth transitions and animations that feels responsive and polished.

Part 2: Modern Animation APIs & Accessibility

Complete the following in the specified order by the due dates listed in Canvas or before the end of the unit if no date is listed:

• Modern Animation APIs
  Explore modern browser animation APIs, including scroll-driven animations, the View Transitions API, and the animation timeline API.
• Animation: Properties, Orchestration, and Accessibility
  Deep dive into animation properties and sequencing, orchestration patterns (staggered and sequential animations), and prefers-reduced-motion and accessible animation patterns.
• Animation Performance and Best Practices
  Learn which properties to animate for best performance, how to reduce jank, and practices for smooth, accessible animations.
• Advanced Animation Practice
  Implement scroll-driven animations and experiment with the View Transitions API to create smooth page or state changes.
• Team Project: Interactive Experience
  Collaboratively build an interactive experience that uses animations throughout, with different team members focusing on distinct interaction patterns. Builds on the Unit 4 Visual Showcase team repo.