How to iterate an animation infinitely in Angular

Issue

I want to iterate animation infinitely and stop and start in my component. I have written the below code:

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
  animations: [
    // Each unique animation requires its own trigger. The first argument of the trigger function is the name
    trigger('run', [transition('void => *',[animate(1000, keyframes([
      style({transform: 'translateX(0)    rotateY(0)',        offset: 0}),
      style({transform: 'translateX(10%)  rotateY(70deg)',    offset: 0.33}),
      style({transform: 'translateX(20%) rotateY(30deg)',   offset: 0.66}),
      style({transform: 'translateX(0%)',                  offset: 1.0})
    ]))
    ])  
  ])  
]
}) 

In the HTML file I have written below code:

<img  @run id="animicon" src="assets/.../logo_1.png" style="background:black" class="image--background">

Solution

Using Angular animations would incorrect in this context. They are intended to be used when the component is added via router or *ngIf or programmatically, when the regular/plain CSS cannot be used or wont work.
Adding them would only make your code unnecessarily complexe, even slow.
For the case you described in your post, you don't need an Angular animation, plain css animation is plenty enough:

CSS

@keyframes myAnimation {
  0%   {transform: translateX(0) rotateY(0)}
  33%  {transform: translateX(10%) rotateY(70deg)}
  66%  {transform: translateX(20%) rotateY(30deg)}
  100% {transform: translateX(0%)}
}

img {
  animation: myAnimation 5s infinite;
}

Demo

Answered By - Vega