Skip to content
Related Articles

Related Articles

Angular10 Animation animate() Function

Improve Article
Save Article
  • Last Updated : 02 Jun, 2021
Improve Article
Save Article

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


animate(timings | styles)

NgModule: Module used by animate is:

  • animations


  • 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 animation using animation() containing timing and styles.
  • Serve the angular app using ng serve to see the output


  • timing: Sets AnimateTimings for the parent animation
  • styles: Sets AnimationStyles for the parent animation

Return Value:

  • AnimationAnimateMetadata: An object that encapsulates the animation step

Example 1:


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';
  declarations: [
  imports: [
  providers: [
      { provide: LOCALE_ID, useValue: 'en-GB' },
  bootstrap: [AppComponent]
export class AppModule { }


import { trigger, state,
style, transition, animate }
       from '@angular/animations';
import { Component } from '@angular/core';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
      state('normal', style({
        'background-color': 'red',
        transform: 'translateX(0)'
      state('highlighted', style({
        'background-color': 'blue',
        transform: 'translateX(0)'
      transition('normal => highlighted',animate(1200)),
      transition('highlighted => normal',animate(1000))
export class AppComponent  {
  state = 'normal';
    this.state == 'normal'
    this.state = 'highlighted' : this.state = 'normal';


<button (click)='anim()'>Animate</button>
  style="width: 100px; height: 100px"



My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!