angular - Continuous flashing/blinking of text line -

i'm trying apply fade-in, fade-out animation on line of text. want keep doing on regular interval (something text flashing). using observable state triggering.

this animations array:

animations: [     trigger('showhide', [         state('invisible', style({opacity: '0', visibility: 'hidden'})),         state('visible', style({opacity: '1', visibility: 'visible'})),         transition('invisible <=> visible', animate('2s linear'))     ]) ] 

variables i'm using:

heading = 'invisible'; index: number = 0; headingarray = [     "heading 1",     "heading 2",     "heading 3" ] 

observable:

observable.interval(2000)         .subscribe(x => {             console.log(x);             this.heading = (this.heading == 'visible') ? 'invisible' : 'visible';             this.index = (x / 2) % 3         }) 

and here's html:

<h2 [@showhide]="heading">     {{headingarray[index]}} </h2> 

it working partially. if put initial value of heading 'invisible' fade-in effect working & vice versa.

it seems problem interval handling. (i'd know if can done without observable)

i've tried using both angular 2 core animation normal css animation. both giving me same effect.

the problem timing. want change text every second tick because animation needs replay both in-out cycle takes 4s.

see updated demo: http://plnkr.co/edit/1lmlxmjigdlnmd8l0qi5?p=preview

.subscribe(x => {     console.log(x);     this.heading = (this.heading == 'visible') ? 'invisible' : 'visible';     if (x % 2 == 0) {         this.index = (x / 2) % 3;     } })