title: Failed to execute angular animate : Partial keyframes are not supported
body: <p>I'm getting started with Angular animations and i'm stuck on that error: </p>
  
  <blockquote>
    <p>ERROR DOMException: Failed to execute 'animate' on 'Element': Partial
    keyframes are not supported.</p>
  </blockquote>
  
  <p>I tried to google it without any success.</p>
  
  <p>Here is my code:</p>
  
  <p>app.component.ts:</p>
  
  <pre><code>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 =&gt; wild', animate(300))
      ])
    ]
  })
  export class AppComponent {
    public currentState: string = "wild";
  }
  </code></pre>
  
  <p>My app.component.html:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;button class="btn btn-secondary col-1 mx-auto" (click) = "currentState='normal'"&gt; normal &lt;/button&gt;
      &lt;button class="btn btn-primary col-1 mx-auto" (click) = "currentState='wild'"&gt; wild &lt;/button&gt;
      &lt;!--&lt;button class="btn btn-success col-1 mx-auto"&gt; 3 &lt;/button&gt;
      &lt;button class="btn btn-danger col-1 mx-auto"&gt; 4 &lt;/button&gt;--&gt;
  
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div [@square] ="currentState" class="square mx-auto"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thank your for your help !</p>