Let's have a quick look on what an animation trigger can look like, and then explain the parts:

animations: [
  trigger('sizeAnimation', [
    state('small', style({
      transform:'scale(1)', 
      backgroundColor: 'green'
    })),
    state('large', style({
      transform: '(1.4)', 
      backgroundColor: 'red'
    })),
    transition('small => large', animate('100ms ease-in')),
    transition('large => small', animate('100ms ease-out'))
  ])
]

The animations array is something we add to the components object, such as template or styleUrls. Inside of the animations array are a number of trigger definitions. A trigger takes a name and an array of items, like so:

trigger('name', [ ... items ]) 

Those items are either a state definition or a transition. With this knowledge, it is easier to understand what we are looking at. For now, we have chosen to call the trigger animationName. It defines two states and two transitions. A state says that a value has been changed to this state and we react accordingly by executing a style, which is why the code should be read as the following: 

state(
  'when I change to this value', 
  style({ /*apply these style changes*/ }))

Looking at our example, we are saying the following:

• If someone triggers sizeAnimation and the value is set to small then apply this transform: scale(1) and backgroundColor: 'green'
• If someone triggers sizeAnimation and the value is set to large then apply this transform: scale(1.4) and backgroundColor: 'red'

The two remaining items are two calls to transition. This instructs the animation on how to apply the animation in a smooth way. You can read a transition definition in the following way:

transition(' when I go from this state > to this state ', animate( 100ms ease-in))

So, when we go from one state to the next, we apply an easing function and also define for how long the animation should execute. Let's look back at our code:

transition('small => large', animate('100ms ease-in')),
transition('large => small',animate('100ms ease-out'))

We interpret it in the following way:

• When we go from the value small to large, carry out the animation for 100ms and use the ease-in function
• When we go from the value large to small, carry out the animation for 100ms and use the ease-out function