In this lesson you will learn how to add animations to your components. Then I’ll show you some shortcuts you can use in your animation configurations. After that you will learn to apply styles that are only in effect during the animation.

Code Snippet

Here’s a sample animation for an Angular 2 button that transitions between two states.

animations: [
  trigger('buttonState', [
    state('inactive', style({
      backgroundColor: '#010A03',
      color: '#F5F200',
      textDecoration: 'line-through',
      transform: 'translateX(600px) scale(1)',
    })),
    state('active',   style({
      backgroundColor: '#2B2BB0',
      color: '#F5EEE0',
      transform: 'scale(1.5)'
    })),
    transition('* => void', [
      style({ backgroundColor: '#FF5100' }),

      animate('2000ms 1000ms ease-in')
    ])
  ])
]