What is the purpose of animate function?

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

@Component({
  selector: 'app-animate',
  templateUrl: `<div [@changeState]="currentState" class="myblock mx-auto"></div>`,
  styleUrls: `.myblock {
    background-color: green;
    width: 300px;
    height: 250px;
    border-radius: 5px;
    margin: 5rem;
    }`,
  animations: [
    trigger('changeState', [
      state(
        'state1',
        style({
          backgroundColor: 'green',
          transform: 'scale(1)',
        }),
      ),
      state(
        'state2',
        style({
          backgroundColor: 'red',
          transform: 'scale(1.5)',
        }),
      ),
      transition('*=>state1', animate('300ms')),
      transition('*=>state2', animate('2000ms')),
    ]),
  ],
})
export class AnimateComponent implements OnInit {
  @Input() currentState;

  constructor() {}

  ngOnInit() {}
}