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

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 Animations

Quiz Yourself: CSS Animations

Test your CSS animations knowledge!

We'll cover the following...

Technical Quiz

1.

(Select all that apply.) Which of the following CSS animation options are customizable?

A.

Duration

B.

Delay

C.

Timing function

D.

Position

E.

Iteration count

F.

Fill mode

G.

Direction

H.

Play state

1 / 5