Angular 2 Animations "Failed to execute 'animate' on 'Element': Partial keyframes are not supported."

I've created the following Angular 2 animation:

trigger('detailsContentAnimation',
  [
    state('1', style(
      {
        'height': '*',
        'padding-top': '*',
        'padding-bottom': '*'
      })),
    state('0', style(
      {
        'height': 0,
        'padding-top': 0,
        'padding-bottom': 0
      })),
    transition('* => *', animate('400ms ease-out'))
  ])

This animation should slide in / out the following HTML content:

<div>
 <div class="col-card__content-div">
  <div [@detailsContentAnimation]="areDetailsVisible" class="card-block">
    <ng-content select=".col-card__contentselector--body"></ng-content>
  </div>
</div>

While the animation is occuring, I get the following error:

Failed to execute 'animate' on 'Element': Partial keyframes are not supported."

Why is this happening and how can I fix it?