Keyframe animations in Angular

Introduction

Keyframe animations let you create smooth, step-by-step changes in your app's look or position. They make your app feel alive and interactive.

To animate a button changing color when clicked.

To smoothly move an element from left to right on the screen.

To fade in content when a page loads.

To create a bouncing effect on an icon.

To animate a loader or spinner while waiting for data.

Syntax

Angular

import { trigger, state, style, animate, keyframes, transition } from '@angular/animations';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  animations: [
    trigger('animationName', [
      transition('startState => endState', [
        animate('duration easing', keyframes([
          style({ property: 'value', offset: 0 }),
          style({ property: 'value', offset: 0.5 }),
          style({ property: 'value', offset: 1 })
        ]))
      ])
    ])
  ]
})

trigger defines the animation name to use in the template.

keyframes lets you specify multiple steps with style and offset from 0 to 1.

Examples

This animation fades an element in when it enters the DOM.

Angular

animations: [
  trigger('fadeIn', [
    transition(':enter', [
      animate('1s ease-in', keyframes([
        style({ opacity: 0, offset: 0 }),
        style({ opacity: 1, offset: 1 })
      ]))
    ])
  ])
]

This moves an element 100 pixels to the right smoothly.

Angular

animations: [
  trigger('moveRight', [
    transition('* => *', [
      animate('500ms ease-out', keyframes([
        style({ transform: 'translateX(0)', offset: 0 }),
        style({ transform: 'translateX(100px)', offset: 1 })
      ]))
    ])
  ])
]

Sample Program

This component shows a button that bounces up and down when clicked. The bounce uses keyframes to move the button smoothly in steps.

Angular

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

@Component({
  selector: 'app-bounce-button',
  template: `
    <button [@bounce]="state" (click)="toggleState()" aria-label="Bounce button">
      Click me
    </button>
  `,
  animations: [
    trigger('bounce', [
      transition('inactive => active', [
        animate('600ms ease-in-out', keyframes([
          style({ transform: 'translateY(0)', offset: 0 }),
          style({ transform: 'translateY(-30px)', offset: 0.3 }),
          style({ transform: 'translateY(0)', offset: 0.6 }),
          style({ transform: 'translateY(-15px)', offset: 0.8 }),
          style({ transform: 'translateY(0)', offset: 1 })
        ]))
      ])
    ])
  ]
})
export class BounceButtonComponent {
  state = 'inactive';

  toggleState() {
    this.state = this.state === 'inactive' ? 'active' : 'inactive';
  }
}

Important Notes

Always include aria-label or other accessibility attributes for interactive elements.

Use offset values between 0 and 1 to control animation steps precisely.

Test animations on different screen sizes to ensure they look good everywhere.

Summary

Keyframe animations let you create smooth, multi-step visual changes.

Use Angular's keyframes inside animate for detailed control.

They make your app feel more dynamic and engaging.