Keyframe animations in Angular - Performance & Optimization

Performance: Keyframe animations

MEDIUM IMPACT

Keyframe animations affect the smoothness of visual transitions and can impact the browser's paint and composite stages, influencing user experience during animations.

Animating an element's position smoothly without causing layout shifts

Angular

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

export const slideAnimation = trigger('slide', [
  transition(':enter', [
    animate('500ms ease-in', keyframes([
      style({ transform: 'translateX(0)', offset: 0 }),
      style({ transform: 'translateX(100px)', offset: 1 })
    ]))
  ])
]);

Animating 'transform' uses the compositor thread, avoiding layout recalculations and reducing jank.

📈 Performance GainNo reflows triggered, only compositing; reduces CPU load and prevents CLS.

Animating an element's position smoothly without causing layout shifts

Angular

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

export const slideAnimation = trigger('slide', [
  transition(':enter', [
    animate('500ms ease-in', keyframes([
      style({ left: '0px', offset: 0 }),
      style({ left: '100px', offset: 1 })
    ]))
  ])
]);

Animating 'left' triggers layout recalculations and reflows causing jank and layout shifts.

📉 Performance CostTriggers 1 reflow and 1 repaint per animation frame, increasing CPU usage and causing CLS.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Animating 'left' property	Multiple style updates	Triggers reflow every frame	High paint cost due to layout changes	[X] Bad
Animating 'transform' property	Style updates only	No reflows triggered	Low paint cost, uses compositor	[OK] Good

Rendering Pipeline

Keyframe animations update styles over time. Animations on layout-affecting properties cause Style Calculation, Layout, Paint, and Composite stages repeatedly. Animations on transform or opacity skip Layout and Paint, going directly to Composite.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages are most expensive when animating layout properties.

Core Web Vital Affected

CLS

Keyframe animations affect the smoothness of visual transitions and can impact the browser's paint and composite stages, influencing user experience during animations.

Optimization Tips

1Animate only transform and opacity properties for best performance.

2Avoid animating layout-affecting properties like left, width, margin.

3Use Angular's animation API with keyframes that target GPU-accelerated properties.

Performance Quiz - 3 Questions

Which CSS property is best to animate for smooth performance in Angular keyframe animations?

A width

B left

C transform

D margin

DevTools: Performance

How to check: Record a performance profile while the animation runs. Look for Layout and Paint events during animation frames.

What to look for: High frequency of Layout and Paint events indicates poor animation performance; absence means optimized animation.