keyframes

function experimental

npm Package	@angular/animations
Module	import { keyframes } from '@angular/animations';
Source	animations/src/animation_metadata.ts

function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata;

Description

keyframes is an animation-specific function that is designed to be used inside of Angular's animation DSL language. If this information is new, please navigate to the component animations metadata page to gain a better understanding of how animations in Angular are used.

keyframes specifies a collection of style entries each optionally characterized by an offset value.

Usage

The keyframes animation function is designed to be used alongside the animate animation function. Instead of applying animations from where they are currently to their destination, keyframes can describe how each style entry is applied and at what point within the animation arc (much like CSS Keyframe Animations do).

For each style() entry an offset value can be set. Doing so allows to specifiy at what percentage of the animate time the styles will be applied.

// the provided offset values describe when each backgroundColor value is applied.
animate("5s", keyframes([
  style({ backgroundColor: "red", offset: 0 }),
  style({ backgroundColor: "blue", offset: 0.2 }),
  style({ backgroundColor: "orange", offset: 0.3 }),
  style({ backgroundColor: "black", offset: 1 })
]))

Alternatively, if there are no offset values used within the style entries then the offsets will be calculated automatically.

animate("5s", keyframes([
  style({ backgroundColor: "red" }) // offset = 0
  style({ backgroundColor: "blue" }) // offset = 0.33
  style({ backgroundColor: "orange" }) // offset = 0.66
  style({ backgroundColor: "black" }) // offset = 1
]))

import {animate, state, style, transition, trigger} from '@angular/animations';
import {Component, NgModule} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@Component({
  selector: 'example-app',
  styles: [`
    .toggle-container {
      background-color:white;
      border:10px solid black;
      width:200px;
      text-align:center;
      line-height:100px;
      font-size:50px;
      box-sizing:border-box;
      overflow:hidden;
    }
  `],
  animations: [trigger(
      'openClose',
      [
        state('collapsed, void', style({height: '0px', color: 'maroon', borderColor: 'maroon'})),
        state('expanded', style({height: '*', borderColor: 'green', color: 'green'})),
        transition(
            'collapsed <=> expanded', [animate(500, style({height: '250px'})), animate(500)])
      ])],
  template: `
    <button (click)="expand()">Open</button>
    <button (click)="collapse()">Closed</button>
    <hr />
    <div class="toggle-container" [@openClose]="stateExpression">
      Look at this box
    </div>
  `
})
export class MyExpandoCmp {
  stateExpression: string;
  constructor() { this.collapse(); }
  expand() { this.stateExpression = 'expanded'; }
  collapse() { this.stateExpression = 'collapsed'; }
}

@NgModule(
    {imports: [BrowserAnimationsModule], declarations: [MyExpandoCmp], bootstrap: [MyExpandoCmp]})
export class AppModule {
}