title: CSS only Text splash screen
body: <p>I'm trying to adapt this code <a href="https://codepen.io/hiteshsahu/pen/MOgzej" rel="nofollow noreferrer">https://codepen.io/hiteshsahu/pen/MOgzej</a> to make a text bounce instead of the ball (so far so good), so when the ball fades at the top of the page, the text fades with the header one at 1:1 (setting font and size ofc).
  I tried 1 billion combinations, but it always end in destroying the global layout of the page. I think it's not complicated but I definitely struggle finding the way to do this. Now I have a double problem : my title is written twice, and (i guess) the z index prevents me to click anything (because the disappear doesn't load correctly).
  Any idea ?</p>
  <pre><code>&lt;div class=&quot;welcome&quot;&gt;
  &lt;span id=&quot;splash&quot; class=&quot;splash&quot;&gt;&lt;/span&gt;
  &lt;span id=&quot;welcome&quot;&gt;&lt;/span&gt;
  &lt;/div&gt;    
  &lt;div class=&quot;static-header&quot;&gt;TITLE&lt;/div&gt;
  </code></pre>
  <pre><code>.welcome {
      background: $white;
      overflow: hidden;
      -webkit-font-smoothing: antialiased;
      animation: disappear 0s ease-in 3.1s forwards;
  }
  
  .splash {
      height: 0px;
      padding: 0px;
      border: 130em solid $third;
      position: fixed;
      left: 50%;
      top: 100%;
      display: block;
      box-sizing: initial;
      overflow: hidden;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation:  disappear 0s ease-in 3.1s forwards, puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
      z-index: 2;
      font-family:$fonttitle;
      font-size: 220%;
      &amp;::before{
          content:  &quot;TITLE&quot;;}        
  }
    
  #welcome {
      background: $primary ;
      width: 56px;
      height: 56px;
      position: absolute;
      left: 50%;
      top: 50%;
      overflow: hidden;
      opacity: 0;
      z-index:2;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      animation: disappear 0s ease-in 3.1s forwards, init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards, hide 2s 2.9s ease forwards;
  }
  
    .welcome header {
      opacity: 0;
      animation:  disappear 0s ease-in 3.1s forwards, moveIn 2s 3.1s ease forwards;
  }
  
    @keyframes init {
      0% {
        width: 0px;
        height: 0px;
      }
      100% {
        width: 56px;
        height: 56px;
        margin-top: 0px;
        opacity: 1;
      }
    }
    
    @keyframes puff {
      0% {
        top: 100%;
        height: 0px;
        padding: 0px;
      }
      100% {
        top: 50%;
        height: 100%;
        padding: 0px 100%;
      }
    }
    
    @keyframes borderRadius {
      0% {
        border-radius: 50%;
      }
      100% {
        border-radius: 0px;
      }
    }
    
    @keyframes moveDown {
      0% {
        top: 50%;
      }
      50% {
        top: 40%;
      }
      100% {
        top: 100%;
      }
    }
    
    @keyframes moveUp {
      0% {
        background: $primary;
        top: 100%;
      }
      50% {
        top: 40%;
      }
      100% {
        top: 50%;
        background: $third;
      }
    }
    
    @keyframes materia {
      0% {
        background: $secondary;
      }
      50% {
        background: $secondary;
        top: 26px;
      }
      100% {
        background: $primary;
        width: 100%;
        height: 64px;
        border-radius: 0px;
        top: 26px;
      }
    }
    
    @keyframes moveIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    
    @keyframes hide {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
  }
  
      @keyframes disappear {
  
      to {
          visibility: none;
        }
      }```
  </code></pre>