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

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>Open</button>
    <button>Closed</button>
    <hr>
    <div class="toggle-container">
      Look at this box
    </div>
  `
})
export class MyExpandoCmp {
  // TODO(issue/24571): remove '!'.
  stateExpression !: string;
  constructor() { this.collapse(); }
  expand() { this.stateExpression = 'expanded'; }
  collapse() { this.stateExpression = 'collapsed'; }

@Component({
  selector: 'eftouch-form-card',
  templateUrl: './eftouch-form-card.component.html',
  animations: [
    trigger('cardStatus', [
      state('INVALID', style({
        backgroundColor: '#FFF',
        transform: 'scale(1.0)'
      })),
      state('VALID',   style({
        backgroundColor: '#afd29a',
        transform: 'scale(1.03)'
      })),
      transition('INVALID => VALID', animate('100ms ease-in')),
      transition('VALID => INVALID', animate('100ms ease-out'))
    ])
  ],
  // We use providers to link this class' superclass, TangerineBaseCardComponent, to its child EftouchFormCardComponent
  // This enables the ContentChildren query in TangerineFormComponent to find its children.
  // See https://github.com/Tangerine-Community/Tangerine/issues/369 for more information
  providers: [{provide: TangerineBaseCardComponent, useExisting: forwardRef(() => EftouchFormCardComponent)}]
})

export class EftouchFormCardComponent extends TangerineBaseCardComponent implements OnInit {

  constructor(fb: FormBuilder, el: ElementRef,service: TangerineFormDefinitionService) {
    super(fb, el, service);
  }

}

transition('* => void', [
        style({
          transform: 'scale(1)'
        }),
        animate(
          '250ms ease',
          style({
            transform: 'scale(0)'
          })
        )
      ])
    ]),
    trigger('labelAnim', [
      transition('void => *', [
        style({ width: '0', opacity: 0 }),
        animate('140ms', style({ width: '*', opacity: 1 }))
      ]),
      transition('* => void', [
        style({ width: '*', opacity: 1 }),
        animate('120ms', style({ width: 0, opacity: 0 }))
      ])
    ])
  ]
})
export class FivFab implements OnInit, OnDestroy, AfterContentInit {
  @Input() vertical?: 'top' | 'middle' | 'bottom' | 'none' = 'none';
  @Input() horizontal?: 'center' | 'start' | 'end' | 'none' = 'none';
  @Input() mode?: 'normal' | 'edge' = 'normal';
  @Input() slot: string;
  @Input() icon: string;
  @Input() spinColor = 'primary';
  @Input() color: string;

selector: 'zjs-hint',
  template: `
    <div role="alert" class="alert alert-{{hintType}} alert-dismissible" id="zjs-hint">
      <button class="close" type="button">
        <span aria-hidden="true">×</span>
      </button>
      <strong>{{'warning' | translate}}</strong>&nbsp;&nbsp;{{hintMsg}}
    </div>`,
  styleUrls: ['./zjs-attachments.less'],
  animations: [
    trigger('toggleSlid', [
      state('void', style({right: '-100%', display: 'none'})),
      state('show', style({right: 0, display: 'block'})),
      state('hide', style({right: '-100%', display: 'none'})),
      transition('* =&gt; show', [
        animate('0.5s ease')
      ]),
      transition('* =&gt; hide', [
        animate('0.5s ease')
      ])
    ])
  ],
})
export class ZjsHintComponent {
  hintCtrl: 'show' | 'hide' = 'hide';
  hintMsg: string;
  hintType: string;

  constructor(private broadcast: SharedBroadcastService) {
    broadcast.hintStream.subscribe((hintInfo: HintInfo) =&gt; {
      this.hintCtrl = 'show';
      this.hintMsg = hintInfo.hintMsg;

import { AppState }                             from '../../../../shared/state/appState';
import { Store }                                from '@ngrx/store';
import { ProjectsActions }                      from '../../../../shared/state/project/projects.actions';
import { Md5 }                                  from 'ts-md5/dist/md5';
import { ErrorService }                         from '../../../../core/error/error.service';

const EMAIL_REGEX = /^[a-zA-Z0-9+\._%-+]{1,256}@[a-zA-Z0-9][a-zA-Z0-9-]{0,64}(\.[a-zA-Z0-9][a-zA-Z0-9-]{0,25})+$/;


@Component({
  selector: 'project-pending-invitations',
  animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({transform: 'translateY(-100%)', opacity: 0}),
        animate('200ms ease-out', style({transform: 'translateY(0%)', opacity: 1}))
      ]),
      transition(':leave', [
        animate('200ms ease-out', style({transform: 'translateY(-100%)', opacity: 0}))
      ])
    ])
  ],
  templateUrl: './project-pending-invitations.component.html',
  styleUrls: ['./project-pending-invitations.component.sass']
})

export class ProjectPendingInvitationsComponent {
  @Input() project: Project;
  roles = ['team member', 'admin'];
  cancelInvitationConfirmationViewIndex: Number = -1;
  user = {email: null, role: this.roles[0]};
  cancelButtonDisabled = false;

template: `
<div class="slider">
  <div class="line"></div>
  <div class="subline inc"></div>
  <div class="subline fill"></div>
  <div class="subline dec"></div>
</div>
    `,
                animations: [
                    trigger('progressAnim', [
                        transition('void =&gt; *', [
                            style({ height: '0px' }),
                            animate('250ms ease-out')
                        ]),
                        transition('* =&gt; void', [
                            animate('299ms ease-in', style({ height: '0px' }))
                        ])
                    ]),
                    trigger('fillAnim', [
                        transition('void =&gt; *', [
                            style({ left: '-5%', width: '5%' }),
                            animate('850ms ease-out', style({ left: '0%', width: '100%' }))
                        ]),
                    ])
                ],
                styles: [`.slider{position:absolute;width:100%;height:5px;overflow-x:hidden;z-index:5000}.line{position:absolute;opacity:.4;width:240%;height:5px;-webkit-animation:5.6s ease-in-out infinite colorspin;animation:5.6s ease-in-out infinite colorspin}.subline{position:absolute;height:5px;background:inherit}.inc{-webkit-animation:1.6s infinite increase,5.6s ease-in-out infinite colorspin;animation:1.6s infinite increase,5.6s ease-in-out infinite colorspin}.dec{-webkit-animation:1.6s .4s infinite decrease,5.6s ease-in-out infinite colorspin;animation:1.6s .4s infinite decrease,5.6s ease-in-out infinite colorspin}.fill{left:0;width:100%;-webkit-animation:5.6s ease-in-out infinite colorspin;animation:5.6s ease-in-out infinite colorspin}@-webkit-keyframes increase{from{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes increase{from{left:-5%;width:5%}to{left:130%;width:100%}}@-webkit-keyframes decrease{from{left:-80%;width:80%}to{left:110%;width:10%}}@keyframes decrease{from{left:-80%;width:80%}to{left:110%;width:10%}}@-webkit-keyframes colorspin{0%,100%{background-color:#4285f4}25%{background-color:#de3e35}50%{background-color:#f7c223}75%{background-color:#1b9a59}}@keyframes colorspin{0%,100%{background-color:#4285f4}25%{background-color:#de3e35}50%{background-color:#f7c223}75%{background-color:#1b9a59}}`]
            }] }
];
/** @nocollapse */
ProgressBar.ctorParameters = () =&gt; [
    { type: LoadingService }
];

* usage: [\@tdFadeInOut]="{ value: true | false, params: { duration: 200 }}"
 * @type {?}
 */
var tdFadeInOutAnimation = trigger('tdFadeInOut', [
    state('0', style({
        opacity: '0',
        visibility: 'hidden',
    })),
    state('1', style({
        opacity: AUTO_STYLE,
        visibility: AUTO_STYLE,
    })),
    transition('0 => 1', [
        group([
            query('@*', animateChild(), { optional: true }),
            animate('{{ duration }}ms {{ delay }}ms {{ easeOnIn }}'),
        ]),
    ], { params: { duration: 150, delay: '0', easeOnIn: 'ease-in' } }),
    transition('1 => 0', [
        group([
            query('@*', animateChild(), { optional: true }),
            animate('{{ duration }}ms {{ delay }}ms {{ easeOnOut }}'),
        ]),
    ], { params: { duration: 150, delay: '0', easeOnOut: 'ease-out' } }),
]);

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
/**
 * const tdBounceAnimation

import { trigger, state, style, transition, animate, keyframes, AnimationTriggerMetadata } from '@angular/animations';
import { styles, params } from './timeline-entry-dot.styles';

export const animations: AnimationTriggerMetadata[] = [
    trigger('expand', [
      state('collapsed', style(styles.collapsed), { params: params.default }),
      state('expanded', style(styles.expanded), { params: params.default }),
      transition('collapsed => expanded', [
        animate('300ms ease', keyframes([
          style({ ...styles.collapsed }),
          style({ ...styles.transition }),
          style({ ...styles.expanded }),
        ]))
      ], { params: params.default }),
      transition('expanded => collapsed', [
        animate('150ms ease', keyframes([
          style({ ...styles.expanded }),
          style({ ...styles.transition }),
          style({ ...styles.collapsed })
        ]))
      ], { params: params.default }),
    ])
  ]

* Returns an [AnimationTriggerMetadata] object with boolean states for a bounce animation.
 *
 * usage: [\@tdBounce]="{ value: true | false, params: { duration: 200 }}"
 * @type {?}
 */
export var tdBounceAnimation = trigger('tdBounce', [
    state('0', style({
        transform: 'translate3d(0, 0, 0)',
    })),
    state('1', style({
        transform: 'translate3d(0, 0, 0)',
    })),
    transition('0 <=> 1', [
        group([
            query('@*', animateChild(), { optional: true }),
            animate('{{ duration }}ms {{ delay }}ms {{ ease }}', keyframes([
                style({
                    animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
                    transform: 'translate3d(0, 0, 0)',
                    offset: 0,
                }),
                style({
                    animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
                    transform: 'translate3d(0, 0, 0)',
                    offset: 0.2,
                }),
                style({
                    animationTimingFunction: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',
                    transform: 'translate3d(0, -30px, 0)',
                    offset: 0.4,
                }),
                style({

animate(300, keyframes([
          style({ opacity: 1, transform: 'translateY(0)', offset: 0 }),
          style({ opacity: 1, transform: 'translateY(-15px)', offset: 0.7 }),
          style({ opacity: 0, transform: 'translateY(100%)', offset: 1 }),
        ]))
      ])
    ]),
    trigger('itemEnter', [
      state('in', style({ transform: 'translateY(0)' })),

      transition('void => *', [
        style({ transform: 'translateY(-100%)', opacity: 0 }),
        animate('300ms ease-out')
      ]),
      transition('* => void', [
        animate('300ms ease-out', style({ transform: 'scaleY(0) translateY(200px)' }))
      ])
    ])
  ]
})
export class AnimationsRepeatingItemsComponent {
  public state = 'inactive';

  public ourItems = [
    'Start the new app project',
    'Work on blog',
    'Lunch at 1'
  ];

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