AI Features

0% completed

All LessonsFree Lessons (6)

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

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

Animations in Angular

Challenge: Create a Bounce on Click Animations

Apply what you’ve learned to complete this challenge!

We'll cover the following...

Problem statement
Coding exercise

Problem statement

...

Ask