title: Continuous flashing/blinking of text line
body: <p>I'm trying to apply fade-in, fade-out animation on a line of text. I want to keep it doing on regular interval (something like text flashing). I am using Observable for state triggering. </p>
  
  <p>This is my animations array:</p>
  
  <pre><code>animations: [
      trigger('showhide', [
          state('invisible', style({opacity: '0', visibility: 'hidden'})),
          state('visible', style({opacity: '1', visibility: 'visible'})),
          transition('invisible &lt;=&gt; visible', animate('2s linear'))
      ])
  ]
  </code></pre>
  
  <p>Variables I'm using:</p>
  
  <pre><code>heading = 'invisible';
  index: number = 0;
  headingarray = [
      "Heading 1",
      "Heading 2",
      "Heading 3"
  ]
  </code></pre>
  
  <p>Observable:</p>
  
  <pre><code>Observable.interval(2000)
          .subscribe(x =&gt; {
              console.log(x);
              this.heading = (this.heading == 'visible') ? 'invisible' : 'visible';
              this.index = (x / 2) % 3
          })
  </code></pre>
  
  <p>And here's HTML:</p>
  
  <pre><code>&lt;h2 [@showhide]="heading"&gt;
      {{headingarray[index]}}
  &lt;/h2&gt;
  </code></pre>
  
  <p>It is working partially. If I put initial value of <em>heading</em> as 'invisible' only fade-in effect is working &amp; vice versa. </p>
  
  <p>It seems to be problem with interval handling. (I'd like to know if this can be done without Observable)</p>
  
  <p>I've tried using both Angular 2 core animation as well as normal CSS animation. Both are giving me same effect.</p>