Animated Navigation/Link-List

HTML

<nav aria-labelledby="nav-title-social">
        <ul>
          <li>
            <h2 id="nav-title-social">Matthew's Links</h2>
          </li>
          <li>
            <a href="https://www.embeemedialab.com" target="_blank">
              <i class="fa fa-globe" aria-hidden="true"></i>
              Web Design
            </a>
          </li>
          <li>
            <a href="https://hosting.embeemedialab.com" target="_blank">
              <i class="fa-solid fa-server" aria-hidden="true"></i>
              Web Hosting
            </a>
          </li>
          <li>
            <a href="https://www.linkedin.com/company/matthewboylesmedia/" target="_blank">
              <i class="fa-brands fa-linkedin" aria-hidden="true"></i>
              LinkedIn
            </a>
          </li>
          <li>
            <a href="https://instagram.com/matthew.b.media?igshid=YmMyMTA2M2Y=" target="_blank">
              <i class="fa-brands fa-instagram" aria-hidden="true"></i>
              Insta
            </a>
          </li>
          <li>
            <a href="https://github.com/embeeML" target="_blank">
              <i class="fa-brands fa-github" aria-hidden="true"></i>
              Github
            </a>
          </li>
          <li>
            <a href="https://www.youtube.com/channel/UCx4hHIHJ5Bi9yuay4hebMHQ" target="_blank">
              <i class="fa-brands fa-youtube" aria-hidden="true"></i>
              YouTube
            </a>
          </li>
          <li>
            <a href="https://codepen.io/embeeML" target="_blank">
              <i class="fa-brands fa-codepen" aria-hidden="true"></i>
              CodePen
            </a>
          </li>
          <li>
            <a href="https://embeeseo.com" target="_blank">
              <i class="fa-solid fa-file-circle-exclamation" aria-hidden="true"></i>
              eMBee SEO
            </a>
          </li>
          
        </ul>
      </nav>
   
    <script src="https://kit.fontawesome.com/c2021474a9.js" crossorigin="anonymous"></script>

CSS

css.css

nav{

}

@keyframes firstShow {
  0%, 100% { transform: perspective(1000px) translate3d(0, 0, 0em); }
  50% { transform: perspective(1000px) translate3d(0, 0, 3em); }
}

@keyframes show {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


ul{

  perspective: 1000px;
  transform-style: preserve-3d;
}

li{

box-shadow: inset 0 0 1rem -0.5rem #0002;
transition: transform 0.35s, box-shadow 0.35s, background 0.35s;
    transform: translate3d(0,0,0);
    opacity: 0;
    animation: 
      firstShow 0.5s ease-in-out,
      show 0.15s linear forwards;


&:nth-child(1) { animation-delay: 0.50s; }
    &:nth-child(2) { animation-delay: 0.60s; }
    &:nth-child(3) { animation-delay: 0.70s; }
    &:nth-child(4) { animation-delay: 0.80s; }
    &:nth-child(5) { animation-delay: 0.90s; }
    &:nth-child(6) { animation-delay: 1.00s; }
    &:nth-child(7) { animation-delay: 1.10s; }
    &:nth-child(8) { animation-delay: 1.20s; }
    &:nth-child(9) { animation-delay: 1.30s; }
    
    &:first-child {
      border-radius: 1rem 1rem 0 0;
    }
    
    &:last-child {
      border-radius: 0 0 1rem 1rem;
    }
    
    &:hover, &:focus-within {
      transform:  translate3d(0,0,3rem);
    }
    
    &:hover + &,
    &:has(+ &:focus-within),
    &:focus + &,
    &:has(+ &:focus-within){
      box-shadow: inset 0 1rem 1rem -1rem #0003;
      transform: translate3d(0,0,2rem);
    }
    &:has(+ &:hover),
    &:has(+ &:focus-within){
      box-shadow: inset 0 -1rem 1rem -1rem #0003;
    }
    &:hover + & + &,
    &:focus-within + & + &{
      box-shadow: inset 0 1rem 0.5rem -0.75rem #0002;
    }
    &:has(+ & + &:hover),
    &:has(+ & + &:focus-within){
      box-shadow: inset 0 -1rem 0.5rem -0.75rem #0002;
    }

}