What is Angular animation?

Angular's animation system is built on the Web Animations API and CSS transitions, providing a powerful DSL for defining component animations in TypeScript. Import: import { trigger, state, style, animate, transition, keyframes, query, stagger } from "@angular/animations";. Core concepts: trigger: gives the animation a name for binding in templates: @Component({ animations: [ trigger("fadeSlide", [ ... ]) ] }). Template binding: <div [@fadeSlide]="animationState">; state: defines styles for a named state: state("void", style({ opacity: 0, transform: "translateY(-20px)" })). void = element not in DOM; transition: defines animation between states: transition("void => *", animate("300ms ease-out")) (* = any state). Shorthand: transition(":enter", ...) (void → *), transition(":leave", ...) (* → void); animate: specifies duration, easing, delay: animate("300ms 100ms ease-in-out", style({ opacity: 1 })); keyframes: step-by-step animations; query/stagger: animate child elements with staggered timing. Common animations: enter/leave fade: add the trigger to the element, bind to a boolean. List item stagger animations with @for. Route transition animations: wrap router-outlet in a trigger based on route data. Angular Animations vs CSS: Angular animations are more programmatic (state-driven), better for conditional animations, and work with component data. CSS animations are simpler for basic effects.