Ini kode saya di bawah ini, saya ingin mengulangi Animasi tanpa batas & berhenti dan mulai di komponen saya, saya telah menulis kode di bawah ini

@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})
    ]))
    ])  
  ])  
]
}) 

Dalam file HTML saya telah menulis kode di bawah ini

<img  @run id="animicon" src="assets/.../logo_1.png" style="background:black"  
                                                                   class="image--background">
1
Abhijit Chakra 3 April 2019, 09:59

1 menjawab

Jawaban Terbaik

Animasi sudut memiliki tujuan untuk digunakan ketika komponen ditambahkan melalui router atau *ngIf atau katakanlah secara terprogram, ketika CSS biasa/polos tidak akan berfungsi. Untuk kasus yang Anda jelaskan dalam posting Anda, Anda tidak memerlukan animasi Angular, animasi css biasa sudah cukup:

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

6
Vega 12 April 2019, 10:11