September 13, 2025
TL;DR — Starting with Angular 20.2, the @angular/animations package is deprecated. Instead, you animate directly from templates using two new features: animate.enter and animate.leave. It’s simpler, lighter, and leverages native CSS or your favorite JS animation library.
Why this change?
- Simpler DX: No framework-specific DSL—just HTML + CSS (or a JS library).
- Smaller bundles: Removing @angular/animations can significantly reduce JS size.
- Smooth performance: Use GPU-friendly CSS transitions/animations.
What the new features do (in a nutshell)
- animate.enter="classA classB" → Applies CSS class(es) when an element enters the DOM.
- animate.leave="classC" → Applies class(es) when an element leaves; Angular removes the node after the longest transition/animation ends.
- (animate.leave)="onLeave($event)" → Run your own JS animation (Web Animations API, GSAP, etc.), then call $event.animationComplete() so Angular knows it can remove the element. (If you forget, Angular times out after ~4s; configurable via MAX_ANIMATION_TIMEOUT.)
Tiny examples
Enter (CSS keyframes):
Leave (CSS transitions):
Angular removes the element after the transition finishes.
Leave (JS-driven):
(Calling animationComplete() is required when you take over the leave animation.)
Migration in 4 quick steps
- Inventory your existing triggers/DSL (trigger, transition, state, :enter, :leave).
- Re-implement with CSS classes + animate.enter / animate.leave in templates.
- For any JS choreography, switch to (animate.leave) with animationComplete().
- Remove @angular/animations once deps are updated.
Downloadable demo app (with code comments)
- What’s inside: three examples—CSS keyframes on enter, CSS transitions on leave, and a Web Animations API leave with animationComplete().
- Run it
👉 Download the project zip 👇
Official references
- Enter/Leave guide — how it works, event bindings, animationComplete(), and MAX_ANIMATION_TIMEOUT.
- Migration guide — deprecation of @angular/animations in v20.2 + why CSS/JS is recommended.
- CSS animations guide — patterns and tips for native CSS animations.