Search⌘ K

AI Features

Animations in Angular

1.Before We Start

Why Animations?Course Focus and Approach Course Structure and Intended Audience

2.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

3.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

4.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

5.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

6.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

7.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

8.Conclusion

Animations in Angular

Quiz Yourself: WAAPI

Test your WAAPI knowledge!

We'll cover the following...