title: Angular animation fade-in on page-load
body: <p><strong>In Angular 5, in the following example, how can I achieve a staggered animation of the <code>&lt;h1&gt;</code> and <code>&lt;p&gt;</code> on page-load?</strong></p>
  
  <p>Goal: When the page loads, fade-in the headline, then fade-in the introduction.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="header" [@header]&gt;
      &lt;h1&gt;Headline&lt;/h1&gt;
      &lt;p&gt;Introduction&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>trigger( 'header', [
      transition( ':enter', [
          query( '*', stagger( '300ms', [
                animate( '.3s ease-in', keyframes([
                  style( { opacity: 0, transform: 'translateY(-15%)', offset: 0}),
                  style( { opacity: 1, transform: 'translateY(0)', offset: 1}),
                ]))
            ]), { optional: true} ),
        ] )
    ] ),  
  </code></pre>
  
  <p>As is, the problem appears to be that <code>&lt;h1&gt;</code> and <code>&lt;p&gt;</code> start with an <code>opacity</code> of <code>1</code> by default. So what appears to be happening is they get faded out first, and then get faded back in.</p>
  
  <p>If I use css to set their <code>opacity</code> to <code>0</code> manually, the start of the animation appears to work correctly, but they get hidden from the page as soon as the animation is over.</p>
  
  <p>What do I need to do to get this to work as desired?</p>