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 !

score 4 · Accepted Answer · answered Mar 19 '18 at 10:25

4

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

answered Mar 19 '18 at 10:25

Could be that the border property required an argument for each side? i.e. `border: 0px 0px 0px 0px`? – Rinktacular Oct 05 '18 at 13:22
No... it's because (s)he didn't HAVE a Zero Pixel property. If you read the original question, it actually said Capital-O Pixels `Opx`. But the same principle applies. If you have errors or misspellings in your code, it'll break. Sometimes in weird ways. – Suamere Dec 01 '18 at 00:24

score 4 · Answer 2 · answered Dec 01 '18 at 00:25

4

Contrary to your personal answer. You don't HAVE a Zero Pixel property. If you read your original question, it actually said Capital-Oh Pixels Opx. But the same principle applies. If you have errors or misspellings in your code, it'll break. Sometimes in weird ways. Zero Pixels 0px would work just fine.

answered Dec 01 '18 at 00:25

Suamere

5,691
2
44
58

This was my problem. simple spelling errors in the animation literal – Samuel Jenks Sep 17 '19 at 20:54

score 3 · Answer 3 · edited Feb 06 '20 at 19:51

3

'Partial Keyframes are not supported' error mainly happens when you misspell something while writing your animation function.

In the above case you have misspelled the 'border' property value in second state.

border property expects a number like 0, 1, 2. But in the above code, you used a character 'O' instead of '0'. Once you replace the 'O' with actual zero '0' it will work fine.

This link will open a picture which will show you were the error was and what you misspelled

edited Feb 06 '20 at 19:51

Brian Tompsett - 汤莱恩

5,753
72
57
129

answered Feb 06 '20 at 19:31

Technocrat

31
1

score 0 · Answer 4 · answered May 01 '20 at 12:26

This error can also arise when a unit for your CSS value is omitted. E.g:

trigger('rotate180', [
    transition(':enter', [
        style({ transform: 'rotate(180)' }), // Doesn't Work!
        animate('0.6s 1.4s cubic-bezier(0.65, 0, 0.35, 1)')
    ]),
    state('*', style({ transform: '*' })),
]),

Will throw an error. The style should be:

{ transform: 'rotate(180deg)' } // Works!

Failed to execute angular animate : Partial keyframes are not supported

4 Answers4