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

A.

Duration

B.

Delay

C.

Timing function

D.

Position

E.

Iteration count

F.

Fill mode

G.

Direction

H.

Play state

1 / 5