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

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

Animations in Angular/

...

/

Quiz Yourself: CSS Transitions

Quiz Yourself: CSS Transitions

Test your CSS transitions knowledge!

We'll cover the following...

Technical Quiz

1.

(Select all that apply.) Which of these are CSS transition options that can be customized?

A.

Duration

B.

Delay

C.

Timing function

D.

Transition property

1 / 5

...