Animations in Angular

INTERACTIVE COURSE

Animations in Angular

Intermediate

60 Lessons

20h

Certificate of Completion

AI Explanations

AI Explanations

Animations in Angular

86 Playgrounds

5 Quizzes

48 Illustrations

Takeaway Skills

The ability to decide which animation method to use given a set of requirements

The ability to effectively debug and fix animations

Hands-on experience creating performant animations

An understanding of how to structure animation code to maximize reusability

Familiarity with integrating third-party animation libraries to create complex animations

Course Overview

Animations play a crucial role in an application’s user experience (UX). A set of well-designed animations can make an application feel fast, polished, and professional. However, creating animations can be a daunting task that involves knowing what is available and how to choose the right approach for each task. You will start with the easiest methods and move on to more advanced animation methods as you make your way through this course. You’ll start with general animation techniques, covering CSS transit...Show More

Course Content

1

Before We Start

Why Animations?

Course Focus and Approach

Course Structure and Intended Audience

2

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

3

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

4

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

5

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

6

Third-party Animation Libraries

8 Lessons

7

Appendix

7 Lessons

8

Conclusion

1 Lesson

COURSE AUTHOR

How You'll Learn

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Videos are holding you back. Educative‘s interactive, text-based lessons accelerate learning — no setup, downloads, or alt-tabbing required.

Learn faster and smarter with adaptive AI tools embedded in every Educative course.

Built-in assessments let you test your skills. Completion certificates let you show them off.

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath