Failed to execute angular animate : Partial keyframes are not supported

Question

I'm getting started with Angular animations and i'm stuck on that error:

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

I tried to google it without any success.

Here is my code:

app.component.ts:

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('square', [
      state('normal', style({
        background: 'transparent',
        border: '2px solid black',
        borderRadius : '0px'
      })),
      state('wild', style({
        background: 'red',
        border: 'Opx',
        borderRadius:'100px'
      })),
      transition('normal => wild', animate(300))
    ])
  ]
})
export class AppComponent {
  public currentState: string = "wild";
}

My app.component.html:

<div class="container-fluid">
  <div class="row">
    <button class="btn btn-secondary col-1 mx-auto" (click) = "currentState='normal'"> normal </button>
    <button class="btn btn-primary col-1 mx-auto" (click) = "currentState='wild'"> wild </button>
    <!--<button class="btn btn-success col-1 mx-auto"> 3 </button>
    <button class="btn btn-danger col-1 mx-auto"> 4 </button>-->

  </div>
  <div class="row">
    <div [@square] ="currentState" class="square mx-auto"></div>
  </div>
</div>

Thank your for your help !

Answer 1

It seems the problem was coming from my border: 0px CSS property within my second state. I replaced it with "none" and it works