How to use the @angular/animations.keyframes function in @angular/animations

}),
            style({ opacity: 1, transform: 'translateY(0)', offset: 1 })
          ])
        )
      ]),
      { optional: true }
    )
  ])
]);

export const translateTrigger = trigger('movePlane', [
  transition(':enter', [
    style({ opacity: 0, transform: 'translate(-5rem,5rem)', offset: 0 }),
    animate(
      '1s ease-in',
      keyframes([
        style({ opacity: 0, transform: 'translate(-5rem,5rem)', offset: 0 }),
        style({
          opacity: 0.5,
          transform: 'translate(-2.5rem,2.5rem)',
          offset: 0.3
        }),
        style({ opacity: 1, transform: 'translate(0,0)', offset: 1 })
      ])
    )
  ])
]);

export const slideTrigger = trigger('slide', [
  state('left', style({ transform: 'translateX(0)' })),
  state('right', style({ transform: 'translateX(-50%)' })),
  transition('* => *', animate('750ms cubic-bezier(0.075, 0.82, 0.165, 1)'))

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/switch';

@Component({
  selector: "sam-search",
  templateUrl: 'search.template.html',
  animations: [
    trigger('search', [
      transition('* => *', [
        query('button', [
          animate('300ms ease-in', keyframes([
            style({opacity: 0, offset: 0}),
            style({opacity: 1, offset: 1})
          ]))
        ], { optional: true })
      ])
    ]),
    trigger('results', [
      transition('* => *', [
        query(':enter', style({ opacity: 0 }), { optional: true}),
        query(':enter', stagger('50ms', [
          animate('50ms ease-in', style({ opacity: 1 }))
        ]), { optional: true })
      ])
    ])
  ],
  providers: [PrototypeSearchService]

import { EntityTypesModel } from '../models/entityTypesModel';
import { TopologyRendererState } from '../redux/reducers/topologyRenderer.reducer';
import { TPolicy } from '../models/policiesModalData';
import { Visuals } from '../models/visuals';

/**
 * Every node has its own component and gets created dynamically.
 */
@Component({
    selector: 'winery-node',
    templateUrl: './node.component.html',
    styleUrls: ['./node.component.css'],
    animations: [trigger('onCreateNodeTemplateAnimation', [
        state('hidden', style({ opacity: 0, transform: 'translateX(0)' })),
        state('visible', style({ opacity: 1, transform: 'scale' })),
        transition('hidden => visible', animate('300ms', keyframes([
            style({ opacity: 0, transform: 'scale(0.2)', offset: 0 }),
            style({ opacity: 0.3, transform: 'scale(1.1)', offset: 0.7 }),
            style({ opacity: 1, transform: 'scale(1.0)', offset: 1.0 })
        ]))),
    ]),
    ]
})
export class NodeComponent implements OnInit, AfterViewInit, OnDestroy, DoCheck {

    public items: string[] = ['Item 1', 'Item 2', 'Item 3'];
    nodeClass: string;
    visibilityState = 'hidden';
    connectorEndpointVisible = false;
    startTime;
    endTime;
    longpress = false;

export function bounceOutY(a, b, c, d) {
  return animation(
    animate(
      '{{ timing }}s {{ delay }}s',
      keyframes([
        style({ transform: 'translate3d(0, {{ a }}, 0)', offset: 0.2 }),
        style({
          opacity: 1,
          transform: 'translate3d(0, {{ b }}, 0)',
          offset: 0.4
        }),
        style({
          opacity: 1,
          transform: 'translate3d(0, {{ c }}, 0)',
          offset: 0.45
        }),
        style({
          opacity: 0,
          transform: 'translate3d(0, {{ d }}, 0)',
          offset: 1
        })

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

export const pulseAnimation = animation([
  style({ transform: 'scale(1)' }),
  animate(
      '{{ timings }}',
      keyframes([
        style({
          transform: 'scale(1)',
          offset: 0
        }),
        style({
          transform: 'scale({{ scale }})',
          offset: 0.5
        }),
        style({
          transform: 'scale(1)',
          offset: 1
        })
      ])
  )
]);

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

import * as kf from './keyframes';

export const cardAnimation = trigger('cardAnimator', [
  transition('* => wobble', animate(1000, keyframes(kf.wobble))),
  transition('* => swing', animate(1000, keyframes(kf.swing))),
  transition('* => jello', animate(1000, keyframes(kf.jello))),
  transition('* => zoomOutRight', animate(1000, keyframes(kf.zoomOutRight))),
  transition('* => slideOutLeft', animate(1000, keyframes(kf.slideOutLeft))),
  transition('* => rotateOutUpRight', animate(1000, keyframes(kf.rotateOutUpRight))),
  transition('* => flipOutY', animate(1000, keyframes(kf.flipOutY))),
]);

import { IAnimationOptions } from '../common/interfaces';

export interface ILightSpeedOutAnimationOptions extends IAnimationOptions {
  /**
   * Translate, possible units: px, %, em, rem, vw, vh
   *
   * Default: 100%
   */
  translate?: string;
}

const lightSpeedOut = animation([
  animate(
    '{{duration}}ms {{delay}}ms',
    keyframes([
      style({ opacity: 1, easing: 'ease-in', offset: 0 }),
      style({ opacity: 0, transform: 'translate3d({{translate}}, 0, 0) skewX(30deg)', easing: 'ease-in', offset: 1 })
    ])
  )
]);

const DEFAULT_DURATION = 1000;

export function lightSpeedOutAnimation(options?: ILightSpeedOutAnimationOptions): AnimationTriggerMetadata {
  return trigger((options && options.anchor) || 'lightSpeedOut', [
    transition(
      '0 => 1',
      [
        ...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
        group([
          useAnimation(lightSpeedOut),

]),
    trigger('boxAnimation', [
      state('*', style({ 'height': '*', 'background-color': '#dddddd', 'color':'black' })),
      state('void, hidden', style({ 'height': 0, 'opacity': 0 })),
      state('start', style({ 'background-color': 'red', 'height': '*' })),
      state('active', style({ 'background-color': 'orange', 'color': 'white', 'font-size':'100px' })),

      transition('active <=> start', [
        animate(500, style({ 'transform': 'scale(2)' })),
        animate(500)
      ]),

      transition('* => *', [
        animate(1000, style({ 'opacity': 1, 'height': 300 })),
        animate(1000, style({ 'background-color': 'blue' })),
        animate(1000, keyframes([
          style({ 'background-color': 'blue', 'color': 'black', 'offset': 0.2 }),
          style({ 'background-color': 'brown', 'color': 'black', 'offset': 0.5 }),
          style({ 'background-color': 'black', 'color': 'white', 'offset': 1 })
        ])),
        animate(2000)
      ])
    ])
  ]
})
export class AnimateApp {
  public items: number[] = [];
  private _state: ('start'|'active'|'void'|'default');

  public bgStatus = 'focus';

  remove(item: number) {

opacity: 1
        })),
        state('out', style({
            opacity: 0
        })),
        transition(':enter', [
            animate('{{ enter }}', keyframes([
                style({opacity: 0, offset: 0, transform: 'translate(0px, 20px)'}),
                style({opacity: 0.3, offset: 0.3, transform: 'translate(0px, -10px)'}),
                style({opacity: 0.5, offset: 0.5, transform: 'translate(0px, 0px)'}),
                style({opacity: 0.75, offset: 0.75, transform: 'translate(0px, 5px)'}),
                style({opacity: 1, offset: 1, transform: 'translate(0px, 0px)'})
            ]))
        ]),
        transition(':leave', [
            animate('{{ leave }}', keyframes([
                style({opacity: 1, transform: 'translateX(0)', offset: 0}),
                style({opacity: 1, transform: 'translateX(-15px)', offset: 0.7}),
                style({opacity: 0, transform: 'translateX(100%)', offset: 1.0})
            ]))
        ])
    ])
];