css3 animation chaining works strange

Question

I made some website that contains text animation.

For implement it, I use CSS3 animation with keyframes.

Also I use Promise to chaining consequence animation.

First, look at the below source I use.

    const intro1 = document.getElementsByClassName('intro1')[0];
    const intro2 = document.getElementsByClassName('intro2')[0];
    const intro3 = document.getElementsByClassName('intro3')[0];
    const intro4 = document.getElementsByClassName('intro4')[0];
    const sleep = ms => new Promise(res => setTimeout(res, ms));
    
    async function intro() {
      // INTRO 1
      await sleep(2500);
      await intro1.classList.remove('fade-in');
      await intro1.classList.add('fade-out');
      
      // INTRO2
      intro2.classList.add('fade-in');
      await sleep(2000);
      await intro2.classList.add('fade-out');
      await intro2.classList.remove('fade-in');
      
      // INTRO 3
      intro3.classList.add('fade-in');
      await sleep(2500);
      await intro3.classList.add('fade-out');
      await intro3.classList.remove('fade-in');
      
      // INTRO 4
      intro4.classList.add('fade-in');
      await sleep(2500);
      await intro4.classList.add('fade-out');
      await intro4.classList.remove('fade-in');
    }
    
    intro();

    body {
      margin: 0;
      padding: 0;
    }
    
    section {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: aliceblue;
      width: 100%;
      height: 100%;
      font-size: 2rem;
      font-weight: 100;
    }
    
    span {
      text-align: center;
      position: absolute;
    }
    .intro2, .intro3, .intro4 {
      display: none;
    }
    .intro2, .intro3, .intro4 {
      text-align: center;
    }
    /* Intro animation */
    .fade-in {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      animation: fadeIn 4s forwards;
    }
    .fade-out {
      animation: fadeOut 1s forwards;
    }
    
    @keyframes fadeIn {
      from {
        width: 0;
      }
      to {
        width: 100%;
      }
    }
    @keyframes fadeOut {
      to {
        opacity: 0;
      }
    }

      <main>
        <section>
          
          <span class="intro1 fade-in">TEST TEST TEST TEST TEST</span>
          
          <div class="intro2">
            <p>INTRO2</p>
          </div>
          
          <div class="intro3">
            <p>INTRO3</p>
          </div>
          
          <div class="intro4">
            <p>INTRO4 TITLE</p>
            <p>INTRO5 SUBJECT ABCDEFghI</p>
          </div>
    
        </section>
      </main>

As you know, I chained all the intro to consequence play.

Before intro2 fade-out, works fine.

But intro2, intro3, intro4's fade-out doesn't work.

Any solution about this?

Thanks.

Answer 1

At intro2 intro3 and intro 4 it is not working because they are set to display:none if it has the class fade in it wil have display:inline-block. and with the class fade-out it wil have display: none again. so the animation wil happen but you wont see it.

An fix for this wil be to add display:inline-block to the class fade-out and remove the class later on.

fix: http://jsfiddle.net/4t3exLya/20/

Edit: i also added text-align: center; and position: absolute; to the class fade-out.