title: Angular and CSS animation with fade-in drop down effect
body: <p>I'm working on a portfolio site for myself but I keep getting this odd behavior with my css animations that I am not interested in. In my mind how it is supposed to work is when someone visits my site the header links should fade-in from the top. Once they have faded into place, if I hover the mouse cursor over the links, it should play a pulsate-into-fading animation and repeat for as long as the mouse cursor is over the link. All of this works properly.</p>
  <p>The problem comes into play when I try to delay the initial animation for the fade-in from the top animation so I can achieve a kind of like &quot;step&quot; or &quot;cascading&quot; animation where the first link drops down and fades into location, a second later the second link drops down and fades in, then after two seconds the third link drops down and fades in. If I delay the animation, I lose the drop down effect and only the fade in effect plays.</p>
  <p>This is the snippet where all three links fade-in and drop down into place.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.myNav{
      height: 64px;
      background-color: #4b5778;
      text-align: center;
      
  }
  
  .navItem{
      margin: 18px 0px 0px 35px;
      display: inline-block;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 20px;
      /* color: white; */
      /* color: rgb(182, 181, 181); */
      color: greenyellow;
      /* transform: scale(1.00);
      transition: transform 1s; */
  }
  
  .fade-in-text{
      animation: fadeIn ease-out 1s;
      -webkit-animation: fadeIn ease-out 1s;
      -moz-animation: fadeIn ease-out 1s;
      -o-animation: fadeIn ease-out 1s;
      -ms-animation: fadeIn ease-out 1s;
  }
  
  .navItem:hover{
      /* transform: scale(1.33);
      transition: transform 1s; */
      animation: pulsate-in 1.2s ease-out infinite;
      /* color: white; */
      color: rgb(222, 255, 173);
  }
  
  /* pulsating text animation */
  @keyframes pulsate-in {
      0% {
          transform: scale(1);
          opacity: 1;
      }
      50% {
          opacity: 0.50;
      }
      100% {
          transform: scale(1.25);
          opacity: 0;
      }
  }
  
  /* fading text animation */
  @keyframes fadeIn{
      0% {opacity: 0; margin: 0px 0px 0px 35px;}
      100% {opacity: 1; margin: 18px 0px 0px 35px;}
  }
  
  /* Mozilla */
  @-moz-keyframes fadeIn{
      0% {opacity: 0; margin: 0px 0px 0px 35px;}
      100% {opacity: 1; margin: 18px 0px 0px 35px;}
  }
   
  /* Safari and Chrome */
  @-webkit-keyframes fadeIn{
      0% {opacity: 0; margin: 0px 0px 0px 35px;}
      100% {opacity: 1; margin: 18px 0px 0px 35px;}
  }
  
  /* Opera */
  @-o-keyframes fadeIn{
      0% {opacity: 0; margin: 0px 0px 0px 35px;}
      100% {opacity: 1; margin: 18px 0px 0px 35px;}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="myNav"&gt;
      &lt;ul id="menu"&gt;
          &lt;!-- &lt;li (mouseover)="increment()" class="fade-in-text navItem"&gt;Intro&lt;/li&gt; --&gt;
          &lt;li (click)="scroll(intro)" #intro class="fade-in-text navItem myIntro "&gt;Intro&lt;/li&gt;
          &lt;li (click)="scroll(projects)" #projects class="fade-in-text navItem myProjects"&gt;Projects&lt;/li&gt;
          &lt;li (click)="scroll(resume)" #resume class="fade-in-text navItem myResume"&gt;Resume&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This is the snippet of the animation that plays if I try doing the animation delay to get the &quot;cascading&quot; effect.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.myNav{
      height: 64px;
      background-color: #4b5778;
      text-align: center;
      
  }
  
  .navItem{
      margin: 18px 0px 0px 35px;
      display: inline-block;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 20px;
      /* color: white; */
      /* color: rgb(182, 181, 181); */
      color: greenyellow;
      /* transform: scale(1.00);
      transition: transform 1s; */
  }
  
  .fade-in-text{
      animation: fadeIn ease-out 1s;
      -webkit-animation: fadeIn ease-out 1s;
      -moz-animation: fadeIn ease-out 1s;
      -o-animation: fadeIn ease-out 1s;
      -ms-animation: fadeIn ease-out 1s;
  }
  
  .fade-in-text-two{
      animation: fadeIn ease-out 1s 2s;
      -webkit-animation: fadeIn ease-out 1s 2s;
      -moz-animation: fadeIn ease-out 1s;
      -o-animation: fadeIn ease-out 1s;
      -ms-animation: fadeIn ease-out 1s;
  }
  
  .fade-in-text-three{
      animation: fadeIn ease-out 1s 3s;
      -webkit-animation: fadeIn ease-out 1s 3s;
      -moz-animation: fadeIn ease-out 1s;
      -o-animation: fadeIn ease-out 1s;
      -ms-animation: fadeIn ease-out 1s;
  }
  
  .navItem:hover{
      /* transform: scale(1.33);
      transition: transform 1s; */
      animation: pulsate-in 1.2s ease-out infinite;
      /* color: white; */
      color: rgb(222, 255, 173);
  }
  
  /* pulsating text animation */
  @keyframes pulsate-in {
      0% {
          transform: scale(1);
          opacity: 1;
      }
      50% {
          opacity: 0.50;
      }
      100% {
          transform: scale(1.25);
          opacity: 0;
      }
  }
  
  /* fading text animation */
  @keyframes fadeIn{
      0% {opacity: 0; margin: 0px 0px 0px 35px;}
      100% {opacity: 1; margin: 18px 0px 0px 35px;}
  }
  
  /* Mozilla */
  @-moz-keyframes fadeIn{
      0% {opacity: 0; margin: 0px 0px 0px 35px;}
      100% {opacity: 1; margin: 18px 0px 0px 35px;}
  }
   
  /* Safari and Chrome */
  @-webkit-keyframes fadeIn{
      0% {opacity: 0; margin: 0px 0px 0px 35px;}
      100% {opacity: 1; margin: 18px 0px 0px 35px;}
  }
  
  /* Opera */
  @-o-keyframes fadeIn{
      0% {opacity: 0; margin: 0px 0px 0px 35px;}
      100% {opacity: 1; margin: 18px 0px 0px 35px;}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="myNav"&gt;
      &lt;ul id="menu"&gt;
          &lt;!-- &lt;li (mouseover)="increment()" class="fade-in-text navItem"&gt;Intro&lt;/li&gt; --&gt;
          &lt;li (click)="scroll(intro)" #intro class="fade-in-text navItem myIntro "&gt;Intro&lt;/li&gt;
          &lt;li (click)="scroll(projects)" #projects class="fade-in-text-two navItem myProjects"&gt;Projects&lt;/li&gt;
          &lt;li (click)="scroll(resume)" #resume class="fade-in-text-three navItem myResume"&gt;Resume&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I tried using nth of type to select each list element individually and then tried giving each a class (as shown in the code). Not sure why I keep getting this behavior. I am running this on Angular. My last resort was to &quot;inject&quot; the class into each element after a delay using TypeScript but I would rather get it done working with css the right way if it is possible. Thanks in advance!</p>