title: How to iterate an animation infinitely in Angular
body: <p>I want to iterate animation infinitely and stop and start in my component. I have written the below code:</p>
  <pre><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 =&gt; *',[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})
      ]))
      ])  
    ])  
  ]
  }) 
  </code></pre>
  <p>In the HTML file I have written below code:</p>
  <pre><code>&lt;img  @run id=&quot;animicon&quot; src=&quot;assets/.../logo_1.png&quot; style=&quot;background:black&quot; class=&quot;image--background&quot;&gt;
  </code></pre>