ionic2 - web animation with setInterval

Question

I am following this tutorial and using the web animation in my ionic2 project.

I have a set the animation in my @component:

@Component({
  selector: 'page-feed',
  templateUrl: 'feed.html',
  //  providers: [DirectiveZHeader] ,
animations: [
    trigger('fadetransform', [
      state('unfadetransform', style({
        opacity: 1,
        transform: 'translate3d(0, 0, 0)'
      })),
      state('fadtransformed', style({
        opacity: 0.3,
        transform: 'translate3d(30%, 0, 0)'
      })),
      transition('unfadetransform <=> fadtransformed', animate('200ms  ease-out'))
    ]),
  ]
})///@component
...
fadetransformstate: String = 'unfadetransform';
...
toggleFadeTransform(){
  this.fadetransformstate = (this.fadetransformstate == 'unfadetransform') ? 'fadtransformed' : 'unfadetransform';
  console.log(this.fadetransformstate);///<--this give the correct answer
}
...
toggleFadeTransformOn(){
  console.log("toggleFadeTransformOn");
    this.fadetransformstate = 'fadtransformed';
    setInterval(this.toggleFadeTransform, 3000);
  }

and my html:

html:
<div [@fadetransform]="fadetransformstate"><img src="assets/img/img01.png" alt=""></div>
<button ion-button secondary small (click)="toggleFadeTransform()" >toggle</button>
<button ion-button secondary small (click)="toggleFadeTransformOn()" >set interval</button>

If I (click)="toggleFadeTransform()", I can toggle and the animation play fine. But if I (click)="toggleFadeTransformOn()", I can see the this.fadetransformstate in the console display correctly, but the animation never play.

Why is setInterval not playing well with web-animation? How can I resolve this?