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? Multi-select

A.

Duration

B.

Delay

C.

Timing function

D.

Transition property

1 / 5

...