[Angular2 Animation] Use Keyframes for Fine-Tuned Angular 2 Animations

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)'))
        ])
    ],