Angular Animation which creates short highlight

Problem

I recently wanted to shortly highlight an Element with Angular animations. But i did not find a way to do it without a state. So here is what i came up with:

Temporary Solution

animations: [
    trigger('highlightRed', [
      transition('*=>hasError', animate('2000ms', keyframes([
        style({backgroundColor: 'initial', boxShadow: 'none', offset: 0} ),
        style({backgroundColor: '#ff5c4c', boxShadow: '0 0 5px #ff5c4c', offset: 0.1} ),
        style({backgroundColor: 'initial', boxShadow: 'none', offset: 1} ),
      ])))
    ])
  ]

...
...

public showError(){
   this.errorState = "hasError";
}

<span [@highlightRed]="errorState" (@highlightRed.done)="errorState = ''">

StackBlitz Demo

Question

Is this type of animation even possible with Angular (-Animations) or do i have to use old-school css animations and how would i trigger them ideally ?

Versions

Angular 7

from Angular Animation which creates short highlight