I want to iterate animation infinitely and stop and start in my ponent. 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">

I want to iterate animation infinitely and stop and start in my ponent. 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">

• javascript
• css
• angular
• typescript
• angular-animations

1 Answer 1

Using Angular animations would be incorrect in this context. They are intended to be used when the ponent 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 plexe, 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

However, if you still want to use Angular approach, here is a take.

ts:

.....
animations: [
    // Each unique animation requires its own trigger. The first argument of the trigger function is the name
    trigger('run', [
      transition('* => *', [
        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 }),
          ])
        ),
      ]),
    ]),
  ],

  ....
  trigger: boolean;

  ngOnInit() {
    setInterval(() => (this.trigger = !this.trigger),1000);
  }

HTML:

<img
  [@run]="trigger"
  .....
/>

demo