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@keyframessyntax, 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), andprefers-reduced-motionand 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.