Chapter 12.4☕ 15 min read

Animations

Angular built-in animation system provides CSS-like transition definitions in TypeScript. Trigger, state, transition, and keyframes for smooth, performant animations.

01Angular Animations Module

Angular has a powerful, built-in animation system that uses CSS-like syntax in TypeScript — no external libraries needed.

"Angular animations = choreography in TypeScript — CSS se powerful."

Setup:

// app.config.ts
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimationsAsync()
  ]
});

Why use Angular animations over CSS?

State-based — define open and closed states, animate between them
Enter/leave — animate elements entering and leaving the DOM
Keyframes — multi-step animations with precise control
Animation callbacks — detect when animations start/end
Works with Angular routing, @if, @for seamlessly

02Trigger — Define Animations

trigger() defines an animation that you can use in templates. Each trigger has one or more transitions.

import { trigger, transition, style, animate, state } from '@angular/animations';

const fadeInOut = trigger('fadeInOut', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('300ms ease-out', style({ opacity: 1 }))
  ]),
  transition(':leave', [
    animate('200ms ease-in', style({ opacity: 0 }))
  ]),
]);

"Trigger = animation ka naam — template mein use karo."

trigger('name', [...]) — creates named animation
:enter — element added to DOM (@if true)
:leave — element removed from DOM (@if false)
style({...}) — CSS styles at a point
animate('300ms', style({...})) — transition between styles

03Using Animations in Template

Using animations in templates is as simple as adding an attribute with @triggerName.

@Component({
  animations: [fadeInOut],
  template: `
    @if (show) {
      <div @fadeInOut>Content</div>
    }
    <div [@openClose]="isOpen ? 'open' : 'close'">Panel</div>
  `
})

"Template mein @triggerName lagao — Angular baaki sambhal lega."

Important: With Angular 17+ @if/@for, animations work perfectly. Using *ngIf may cause issues — use @if instead.

04Keyframes — Multi-Step Animations

keyframes() allows multi-step animations with intermediate style stops, like creating a bounce effect.

import { trigger, transition, style, animate, keyframes } from '@angular/animations';

const bounceIn = trigger('bounceIn', [
  transition(':enter', [
    animate('600ms ease-out', keyframes([
      style({ transform: 'scale(0)', opacity: 0, offset: 0 }),
      style({ transform: 'scale(1.15)', opacity: 1, offset: 0.5 }),
      style({ transform: 'scale(0.95)', opacity: 1, offset: 0.75 }),
      style({ transform: 'scale(1)', opacity: 1, offset: 1 }),
    ]))
  ]),
]);

"Keyframes = frame by frame — ek ek step define karo. offset 0 = start, 1 = end."

offset is a number from 0 to 1 representing animation progress at each keyframe.

05Animation States and Transitions

State-based animations are for components that have multiple visual states.

import { trigger, state, style, transition, animate } from '@angular/animations';

const openClose = trigger('openClose', [
  state('open', style({ height: '200px', backgroundColor: '#dd0031' })),
  state('closed', style({ height: '0px', backgroundColor: 'transparent' })),
  transition('open => closed', [animate('300ms ease-in')]),
  transition('closed => open', [animate('400ms ease-out')]),
]);

"States = positions — open ya closed. Transition = movement between them."

When to use states vs enter/leave:

Enter/Leave (:enter, :leave) — element appears/disappears from DOM. Use with @if.
State-based — element exists in DOM but changes appearance.
Both combined — you can have :enter/:leave AND state transitions in the same trigger.

Key Takeaways

provideAnimationsAsync() in app.config.ts to enable animations
trigger() defines named animations with transitions and states
:enter / :leave animate element appearing/disappearing with @if/@for
keyframes() for multi-step animations with offset control
state() defines visual states, transition() moves between them
Use @if/@for (not *ngIf/*ngFor) for reliable animation triggers

Previous12.3 — i18n 📋 All Chapters Next Chapter12.5 — Security →