Angular10 animation transition API Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report In this article, we are going to see what is transition in Angular 10 and how to use it. The transition in Angular10 is used to create a transition for the animation in which an element will go from one state to another. Syntax: transition (stateChangeExpr, steps, options) NgModule: Module used by transition is: animations Approach: Create the angular app to be used.In app.module.ts import BrowserAnimationsModule.In app.component.html make a div which will contain the animation element.In app.component.ts import the trigger, state, style, transition, animate to be used.Make the transition containing stateChangeExpr, steps, options for the animation.Serve the angular app using ng serve to see the output. Parameters: stateChangeExpr: a boolean expression that compares the previous and current animation states.steps: One or more animation objects returned by animation.options: An options object that can contain a delay value for the start of the animation Return Value: AnimationTrasitionMetadata: An object that encapsulates the new transition data. Example 1: app.module.ts import { LOCALE_ID, NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule ], providers: [ { provide: LOCALE_ID, useValue: 'en-GB' }, ], bootstrap: [AppComponent] }) export class AppModule { } app.component.ts import { // Transition is imported here trigger, state, style, transition, animate } from '@angular/animations'; import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ], animations: [ trigger('geek',[ state('clr', style({ 'background-color': '#ff0000', transform: 'translateX(0)' })), state('clr1', style({ 'background-color': '#000000', transform: 'translateX(100px) translateY(100px) scale(0.3)' })), // transition is used here transition('clr => clr1',animate(1600)), transition('clr1 => clr',animate(100)) ]) ] }) export class AppComponent { state = 'clr'; anim(){ this.state == 'clr' ? this.state = 'clr1' : this.state = 'clr'; } } app.component.html <h1>GeeksforGeeks</h1> <button (click)='anim()'>Animate</button> <br> <br> <div style="width: 150px; height: 100px; border-radius: 5px;" [@geek]='state'> </div> Output: Reference: https://v17.angular.io/api/animations/transition Comment More infoAdvertise with us Next Article Animations in AngularJS Applications T taran910 Follow Improve Article Tags : Web Technologies AngularJS Angular10 Similar Reads Angular10 animation Style API In this article, we are going to see what is Style in Angular 10 and how to use it. The Style in Angular10 is used to create a key/value object containing CSS properties/styles that can be used for an animation state. Syntax: Style(tokens) NgModule: Module used by Style is: animations Approach: Crea 1 min read Angular10 State Animation In this article, we are going to see what is State in Angular 10 and how to use it. The State in Angular10 is used to create an animation trigger containing state and transition of the animation. Syntax: State(name, style, options) NgModule: Module used by State is: animations  Approach: Create an 2 min read Angular10 Trigger Animation In this article, we are going to see what is trigger in Angular 10 and how to use it. The trigger in Angular10 is used to create an animation trigger containing state and transition of the animation. Syntax: animate(name | definitions) NgModule: Module used by trigger is: animations  Approach: Cre 2 min read Animations in AngularJS Applications AngularJS is the initial version of Angular Framework. As in the latest Angular2+ versions, there are different libraries that can be used to provide advanced animations to the application. Animations are the existing features given to the application that improve the user experiences and also add i 5 min read Angular PrimeNG Skeleton Animation Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use Skeleton Animation in Angular PrimeNG. We will also learn a 3 min read Angular10 Animation animate() Function In this article, we are going to see what is animate in Angular 10 and how to use it. The animate in Angular10 is used to define an animation step that combines styling information with timing information Syntax: animate(timings | styles) NgModule: Module used by animate is: animations Approach: Cr 2 min read Like