When easing isn’t enough to get the exact animation you want, you can leverage keyframes to define and precise styles and steps over time. Keyframes allow you to achieve pretty much any Angular 2 animation you want.

 

animations:[        trigger('signal', [            state('void', style({                'transform':'translateY(-100%)'            })),            state('go', style({                'background-color':'green',                'height':'100px'            })),            state('stop', style({                'background-color':'red',                'height':'50px'            })),            transition('void => *', animate(8000, keyframes([                style({
    'transform':'scale(0)'}),                style({
    'transform':'scale(.1)'}),                style({
    'transform':'scale(.9)'}),                style({
    'transform':'scale(1)'})            ]))),            transition('* => *', animate('2s 1s cubic-bezier(0.175, 0.885, 0.32, 1.275)'))        ])    ],