Motion Design with CSS
CSS animation is crucial to developing interactive designs and interfaces, and this course teaches one of the most performant ways to animate: CSS.
What you'll learn
Web browsers can display stunning CSS animations and transitions. This course, Motion Design with CSS, shows how you can use CSS animations and transitions to enhance your web applications with powerful, information-rich motion and color. CSS is one of the most performant ways to animate today, and this course gives developers the future-facing tools they need to do just that. You’ll begin by animating a rolling ball, and learn how to use the browser’s developer tools to help debug. Next, you’ll explore how animation can add decoration and draw attention to various parts of a design. Finally, you’ll explore how to make complex animations using event listeners, and will discover how to track the performance of your animations. By the end of this course, you’ll have mastered the tools you need to set your ideas in motion on the web.
Table of contents
- Static vs. Dynamic Animations 4m
- Exercise 5: Sensing Visual Play Readiness 1m
- Exercise 5 Solution 9m
- Exercise 6: Falling up the Hole 4m
- Exercise 6 Solution 8m
- Managing State 7m
- Sequencing 4m
- Exercise 7: Sitting Tuna Down 2m
- Chaining Animations with Event Listeners 10m
- Exercise 8: Sitting Tuna Down with Event Listeners 2m
- Exercise 8 Solution 3m
- Stateful Animations Summary 6m
About the author
Rachel Nabors is a web animation expert, an award-winning cartoonist, and invited expert at the W3C. She has worked on interactive projects with companies like Adobe and Mozilla. She travels the world, speaking and training, and helping teams put animation to work in their design systems and documentation. When not biking around her home city of Portland, she curates WebAnimationWeekly.com.