CHAPTER 23 Beginner

Angular Animations

Updated: May 18, 2026

5 min read

# CHAPTER 23

Angular Animations

1. Chapter Introduction

Animations transform a functional app into a delightful experience. Angular provides a powerful animation system built on the Web Animations API, with a declarative DSL (Domain Specific Language) that defines animations in TypeScript alongside component metadata. This keeps animations co-located with their components and avoids CSS animation conflicts.

2. Learning Objectives

Import BrowserAnimationsModule.

Define animation triggers with trigger().

Create state-based transitions with state() and transition().

Use keyframes for multi-step animations.

Implement list enter/leave animations.

3. Setup

bash

npm install @angular/animations

app.config.ts

12345

import { provideAnimations } from &#039;@angular/platform-browser/animations&#039;;

export const appConfig = {
  providers: [provideAnimations()]
};

4. Basic Trigger and Transition

typescript

123456789101112131415161718192021

import { Component } from &#039;@angular/core&#039;;
import { trigger, state, style, transition, animate } from &#039;@angular/animations&#039;;

@Component({
  selector: &#039;app-toggle&#039;,
  template: `
    <button (click)="toggle()">Toggle Box</button>
    <div [@boxState]="currentState" class="box"></div>
  `,
  animations: [
    trigger(&#039;boxState&#039;, [
      state(&#039;small&#039;, style({ width: &#039;100px&#039;, height: &#039;100px&#039;, backgroundColor: &#039;#6366f1&#039; })),
      state(&#039;large&#039;, style({ width: &#039;200px&#039;, height: &#039;200px&#039;, backgroundColor: &#039;#ec4899&#039; })),
      transition(&#039;small <=> large&#039;, animate(&#039;400ms ease-in-out&#039;))
    ])
  ]
})
export class ToggleComponent {
  currentState = &#039;small&#039;;
  toggle(): void { this.currentState = this.currentState === &#039;small&#039; ? &#039;large&#039; : &#039;small&#039;; }
}

5. Enter and Leave Animations

typescript

123456789101112131415161718

import { trigger, transition, style, animate } from &#039;@angular/animations&#039;;

@Component({
  animations: [
    trigger(&#039;fadeInOut&#039;, [
      transition(&#039;:enter&#039;, [  // When element is added to DOM
        style({ opacity: 0, transform: &#039;translateY(-20px)&#039; }),
        animate(&#039;300ms ease-out&#039;, style({ opacity: 1, transform: &#039;translateY(0)&#039; }))
      ]),
      transition(&#039;:leave&#039;, [  // When element is removed from DOM
        animate(&#039;300ms ease-in&#039;, style({ opacity: 0, transform: &#039;translateY(-20px)&#039; }))
      ])
    ])
  ]
})
export class NotificationComponent {
  show = true;
}

html

123

<div *ngIf="show" [@fadeInOut]>
  <p>This notification fades in and out!</p>
</div>

6. List Animation (staggered)

typescript

12345678910111213141516171819

import { trigger, transition, style, animate, stagger, query } from &#039;@angular/animations&#039;;

@Component({
  animations: [
    trigger(&#039;listAnimation&#039;, [
      transition(&#039;* <=> *&#039;, [
        query(&#039;:enter&#039;, [
          style({ opacity: 0, transform: &#039;translateX(-30px)&#039; }),
          stagger(&#039;100ms&#039;, [
            animate(&#039;400ms ease-out&#039;, style({ opacity: 1, transform: &#039;translateX(0)&#039; }))
          ])
        ], { optional: true })
      ])
    ])
  ]
})
export class ProductListComponent {
  products = [&#039;Laptop&#039;, &#039;Phone&#039;, &#039;Tablet&#039;];
}

html

123

<ul [@listAnimation]="products.length">
  <li *ngFor="let p of products">{{ p }}</li>
</ul>

7. Keyframe Animations

typescript

12345678910111213

import { keyframes } from &#039;@angular/animations&#039;;

trigger(&#039;bounce&#039;, [
  transition(&#039;:enter&#039;, [
    animate(&#039;600ms&#039;, keyframes([
      style({ transform: &#039;translateY(0)&#039;,    offset: 0 }),
      style({ transform: &#039;translateY(-30px)&#039;, offset: 0.4 }),
      style({ transform: &#039;translateY(-15px)&#039;, offset: 0.6 }),
      style({ transform: &#039;translateY(-5px)&#039;,  offset: 0.8 }),
      style({ transform: &#039;translateY(0)&#039;,    offset: 1.0 })
    ]))
  ])
])

8. Route Transition Animations

typescript

1234567

// Route animations
export const slideInAnimation = trigger(&#039;routeAnimations&#039;, [
  transition(&#039;* <=> *&#039;, [
    query(&#039;:enter&#039;, style({ opacity: 0, transform: &#039;translateX(100%)&#039; })),
    query(&#039;:enter&#039;, animate(&#039;400ms ease-out&#039;, style({ opacity: 1, transform: &#039;translateX(0)&#039; })))
  ])
]);

html

1234

<!-- app.component.html -->
<div [@routeAnimations]="getRouteAnimationState(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

9. Common Mistakes

Forgetting provideAnimations(): Without registering the animations provider, all animation decorators are ignored silently.

Animating height to auto: CSS transitions cannot animate to height: auto. Use max-height trick or Angular's CDK AnimationBuilder for dynamic heights.

10. MCQs with Answers

Question 1

What function defines an animation in Angular?

Question 2

What does `:enter` transition correspond to?

Question 3

What does `:leave` transition correspond to?

Question 4

What function creates a multi-step animation at specific offsets?

Question 5

What function staggers animations for list items?

Question 6

Where are Angular animations defined in a component?

Question 7

How do you apply an animation trigger to an HTML element?

Question 8

What must be provided to use Angular animations?

Question 9

What function specifies the duration and easing of an animation?

Question 10

What does `transition('* <=> *', ...)` mean?

11. Interview Questions

Q: What is the difference between CSS animations and Angular animations? When would you use one over the other?

Q: How would you implement a page transition animation when the route changes?

12. Summary

Angular animations provide a powerful, TypeScript-first approach to motion design that integrates seamlessly with the component lifecycle. By colocating animation definitions with component metadata, teams maintain a clear connection between UI behavior and visual transitions.

13. Next Chapter Recommendation

Beautiful apps must also be fast apps. In Chapter 24: Angular Performance Optimization, we tackle lazy loading, change detection strategies, trackBy, and other techniques to keep your Angular app running at 60fps.

Browse All 21+ Subject Areas

Quick Links

Visual Algorithm Labs

Frontend Dev

The Future of Web Architecture in 2026

Practice Quizzes

Angular Animations #

1. Chapter Introduction #

2. Learning Objectives #

3. Setup #

4. Basic Trigger and Transition #

5. Enter and Leave Animations #

6. List Animation (staggered) #

7. Keyframe Animations #

8. Route Transition Animations #

9. Common Mistakes #

10. MCQs with Answers #

What function defines an animation in Angular?

What does :enter transition correspond to?

What does :leave transition correspond to?

What function creates a multi-step animation at specific offsets?

What function staggers animations for list items?

Where are Angular animations defined in a component?

How do you apply an animation trigger to an HTML element?

What must be provided to use Angular animations?

What function specifies the duration and easing of an animation?

What does transition('* <=> *', ...) mean?

11. Interview Questions #

12. Summary #

13. Next Chapter Recommendation #

Finish this Chapter

Discussion

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1

Send Feedback / Bug

Feedback Submitted!

Angular Animations

1. Chapter Introduction

2. Learning Objectives

3. Setup

4. Basic Trigger and Transition

5. Enter and Leave Animations

6. List Animation (staggered)

7. Keyframe Animations

8. Route Transition Animations

9. Common Mistakes

10. MCQs with Answers

What does `:enter` transition correspond to?

What does `:leave` transition correspond to?

What does `transition('* <=> *', ...)` mean?

11. Interview Questions

12. Summary

13. Next Chapter Recommendation