title: How to use Angular animations sequence() method to trigger animation only after one finishes?
body: <p>I have two elements on the page that I want to animate sequentially.</p>
  
  <pre><code>1. h1 tag
  2. the background image
  </code></pre>
  
  <p>My component's html template looks like this:</p>
  
  <pre><code>`&lt;div class="container"&gt;
    &lt;h1 [@flyInOut]="isIn ? 'in' : 'out'"  class="welcome-title"&gt;WELCOME&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div [@flyInOut]="isIn ? 'in' : 'out'"  class="background"&gt;  &lt;div class="gradient"&gt;
      &lt;div class="container"&gt;
          &lt;div style="height: 350px;"&gt;&lt;/div&gt;        
      &lt;/div&gt;    
    &lt;/div&gt;
  &lt;/div&gt;`
  </code></pre>
  
  <p>I have the following animation:</p>
  
  <pre><code>`animations: [
      trigger('flyInOut', [
        state('in', style({ transform: 'translateX(0)'})),
        transition(':enter', [
          style({
            transform: 'translateY(-3%)',
            opacity: 0,
            position: 'static'
          }),
          sequence([          
            animate(
              '3.5s ease-in-out',
              keyframes([
                style({ transform: 'translateY(50%)', opacity: 0 }),
                style({ transform: 'translateY(0%)', opacity: 1 }),
              ])
            ),
            animate('2.5s .2s ease-in', keyframes([
              style({ opacity: .0, offset: .2 }),
              style({ opacity: .2, offset: .6 }),
              style({ opacity: .4, offset: .8 }),
              style({ opacity: .99, offset: 1 })
            ]))
          ])  
        ])
      ]),`
  </code></pre>
  
  <p>All I am looking to do is simply run the first animate function, only THEN run the second animate function. According to angular docs, I should be able to accomplish this with the sequence method, but this is not the case.</p>
  
  <p>What I am seeing is that the given code, will execute both animations in parallel and once it has finished doing the first animation it will then trigger the second animation. </p>
  
  <p>I have a feeling its something with how I am using the animations in the HTML template. Any recommendations?</p>