CSS Animations and Transitions
Offered By: Frontend Masters
Course Description
Overview
UI animations play an important role for web apps and websites in improving the user experience. But creating animations can be difficult, or done excessively. Learn CSS animation basics and transition to advanced concepts like orchestration and choreography. Techniques you’ll learn: CSS transitions, animations, custom properties, data attributes, choreography, animation states, layout animations, and reactive animations with a little bit of JavaScript.
Syllabus
- Introduction
- Course Overview
- Animation Fundamentals
- Animation Easing
- CSS Variables
- What to Animate
- CSS Transitions
- Button Transition Exercise
- Button Transition Solution
- CSS Keyframes
- CSS Keyframes Exercise
- CSS Keyframes Solution
- Choreography
- Stagger Animation Exercise
- Stagger Animation Solution
- Composing Animations
- Using Animations in React
- States & Data Attributes
- Creating a Simple State Machine
- State Machine Q&A
- Animating States Exercise
- Animating States Solution
- Layout Animation FLIP Technique
- FLIP Technique Q&A
- FLIP Technique Exercise
- FLIP Technique Solution
- Pointer Events
- Lerp Technique
- In-Flight Application Animations
- prefers-reduced-motion
- Recreating an Animation
- Wrapping Up
Taught by
David Khourshid
Related Courses
Intro to HTML and CSSUdacity Responsive Web Design Fundamentals
Google via Udacity HTML5 and CSS Fundamentals
World Wide Web Consortium (W3C) via edX CSS Basics
Microsoft via edX Advanced CSS Concepts
Microsoft via edX