Log In
Join
for free
Back To Course Home
Animations in Angular
0% completed
Before We Start
Why Animations?
Course Focus and Approach
Course Structure and Intended Audience
CSS Transitions
Introduction to CSS Transitions
Configurable Properties
Events
Example: Button Hover Animation
Example: Button State Change Animation
Real World Use Cases
Tips And Tricks
Quiz Yourself: CSS Transitions
Challenge: State Change With Slide Animation
Solution Review : State Change with Slide Animation
CSS Animations
Introduction to CSS Animations
Configurable Properties
CSS Animations in Angular
Events
Example: Card Fade and Scale Enter Animation
Real World Use Cases
Tips And Tricks
Quiz Yourself: CSS Animations
Challenge: Spinning Animation
Solution Review: Spinning Animation
Web Animations API (WAAPI)
Introduction to Web Animations API
How WAAPI works
WAAPI in Angular
Example: Controllable Animations
Real World Use Cases
Quiz Yourself: WAAPI
Challenge: Chain Animations Between Multiple Elements
Solution Review: Chain Animations Between Multiple Elements
Angular Animations
Introduction to Angular Animations
States and Transitions
Sequential Animations
Parallel Animations
Multi-step Keyframes Animation
Target Multiple Elements
Target Children Elements
Route Animations
Events
Disable Animations
Quiz Yourself: Angular Animations
Challenge: Create Sequential and Parallel Animations
Solution Review: Create Sequential and Parallel Animations
Third-party Animation Libraries
Introduction to Third-party Animation Libraries
Animate.css
Motion One
Popmotion
GreenSock
Quiz Yourself: Third-party Animation Libraries
Challenge: Create a Bounce on Click Animations
Solution Review: Create a Bounce on Click Animations
Appendix
Animation Performance
Average Frames per Second
Multithread Processing
Average CPU Usage and Energy Impact
Debugging: Inspecting Our Animations
Debugging: Bezier Curve Editor
Setting Up Third-party Libraries
Conclusion
Wrap Up!
Quiz Yourself: WAAPI
Test your WAAPI knowledge!
Get hands-on with 1400+ tech skills courses.
Start Free Trial