不要为任意数量的项目 li:nth-child (N)-硬编码 CSS，这很难维护。

顺序交错延迟动画

使用CSS 变量通过使用填充模式both创建交错动画，并使用 CSScalc()中的 CSS 变量控制延迟：

#check-ul li {
  animation: animate 350ms ease calc(var(--i) * 200ms) both;
}
@keyframes animate {
  0% {
    opacity: 0;
    transform: translateX(-2em);
  }
  
  100% {
    opacity: 1;
  }
}

<div cl="nav-menu" id="nav-menu">
  <ul id="check-ul">
    <li style="--i:1"><a xxx="#">Home</a></li>
    <li style="--i:2"><a xxx="#">About us</a></li>
    <li style="--i:3"><a xxx="#">Curriculum</a></li>
    <li style="--i:4"><a xxx="#">Criteria</a></li>
    <li style="--i:5"><a xxx="#">Admission Process</a></li>
    <li style="--i:6"><a xxx="#">Careers </a></li>
    <li style="--i:7"><a xxx="#">Contact us</a></li>
    <li style="--i:8"><a xxx="#">Enquire Now</a></li>
  </ul>
</div>

通过按钮点击打开触发菜单动画：

const toggleTarget = (sel) => {
  const EL_targets = doent.querySelectorAll(sel);
  EL_targets.forEach(EL => EL.clList.toggle("is-active"));
};
const EL_toggleButtons = doent.querySelectorAll("[data-toggle]");
EL_toggleButtons.forEach(EL => EL.addEventListener("click", (ev) => {
  toggleTarget(ev.currentTarget.dataset.toggle);
}));

#nav-menu {
  position: fixed;
  background: #d00;
  color: #fff;
  top: 0;
  left: 0;
  height: 100vh;
  padding: 20px;
  transition: 0.3s;
  transform: translateX(-100%);
}
#nav-menu.is-active {
  transform: translateX(0%);
}
#nav-menu.is-active li {
  animation: animate 350ms ease calc(var(--i) * 100ms) both;
}
@keyframes animate {
  0% {
    opacity: 0;
    transform: translateX(-2em);
  }
  100% {
    opacity: 1;
  }
}

<on type="on" data-toggle="#nav-menu">OPEN MENU</on>
<div id="nav-menu">
  <on type="on" data-toggle="#nav-menu">CLOSE</on>
  <ul>
    <li style="--i:1"><a xxx="#">Home</a></li>
    <li style="--i:2"><a xxx="#">About us</a></li>
    <li style="--i:3"><a xxx="#">Curriculum</a></li>
    <li style="--i:4"><a xxx="#">Criteria</a></li>
    <li style="--i:5"><a xxx="#">Admission Process</a></li>
    <li style="--i:6"><a xxx="#">Careers </a></li>
    <li style="--i:7"><a xxx="#">Contact us</a></li>
    <li style="--i:8"><a xxx="#">Enquire Now</a></li>
  </ul>
</div>

为了完成一个完整的示例，我认为您需要混合使用一些 JavaScript。

让我们通过首先创建必要的组件来正确显示视频中的导航来解决这个问题：

<div cl="navigation">
  <on id="toggle-on">
  <svg cl="menu-on" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
  </svg>
</on>

并相应地设计它：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-family: 'Roboto';
}
#toggle-on {
  background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}
.navigation {
  background: #1f2937;
}
.menu-on {
  color: white;
  width: 2.3rem;
  height 2.3rem;
}

接下来我们需要做的是为面板，推子和侧面菜单准备必要的标记。

<div cl="overlay-container hidden">
    <div cl="overlay"></div>
    <div cl="panel">
      <ul cl="menu">
        <li cl="hidden" style="--i:1">Menu item #1</li>
        <li cl="hidden" style="--i:2">Menu item #2</li>
        <li cl="hidden" style="--i:3">Menu item #3</li>
        <li cl="hidden" style="--i:4">Menu item #4</li>
      </ul>
    </div>
  </div>

当然还有风格：

.overlay-container.hidden {
  display: none;
}
.overlay-container {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.overlay.fade {
  opacity: 0.6;
}
.overlay {
  position: absolute;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  background: black;
  transition: opacity 300ms ease-out;
}
.panel.slide {
  transform: translateX(0%);
}
.panel {
  position: absolute;
  height: 100vh;
  width: 18rem;
  background: #c00136;
  transform: translateX(-100%);
  transition: transform 300ms ease-out;
}
.menu {
  padding: 1rem 1rem;
  list-style-type: none;
}
.menu li.hidden {
  visibility: hidden;
}
.menu li {
  color: #f7f7f7;
  margin: 1rem 0;
}
.menu li.fadeInLeft {
  animation: fadeInLeft 350ms ease calc(var(--i) * 200ms) both;
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2em);
  }
  100% {
    opacity: 1;
  }
}

现在使用这个 javascript，你可以一起编排一切。请注意我是如何使用一些过渡以及动画的，所以我们可以按顺序计时

let on = doent.getElementById("toggle-on");
let backbox = doent.querySelectorAll('.overlay-container')[0];
let overlay = doent.querySelectorAll('.overlay')[0];
let panel = doent.querySelectorAll('.panel')[0];
/*
 * Since transitions from 'hidden'
 * to 'block' don't animate we need 
 * to trigger a browser repaint by
 * asking the element for it's height
 */
function forceRepaint(element) {
  return element.offsetHeight;
}
on.addEventListener("click", function () {
  backbox.clList.remove('hidden');
  forceRepaint(backbox);
  overlay.clList.add('fade');
  panel.clList.add('slide');
});
panel.addEventListener("transitionend", function () {
  doent.querySelectorAll('.menu li').forEach(node => {
    node.clList.remove("hidden");
    node.clList.add('fadeInLeft');
  })
});

我建议你逐步解决这些问题，这样你将来也能自己解决这些问题。像这样的问题起初看起来很复杂，但你必须把它们分解成更小的部分。

最后，这一切是如何结合在一起的。

let on = doent.getElementById("toggle-on");
let backbox = doent.querySelectorAll('.overlay-container')[0];
let overlay = doent.querySelectorAll('.overlay')[0];
let panel = doent.querySelectorAll('.panel')[0];
/*
 * Since transitions from 'hidden'
 * to 'block' don't animate we need 
 * to trigger a browser repaint by
 * asking the element for it's height
 */
function forceRepaint(element) {
  return element.offsetHeight;
}
on.addEventListener("click", function() {
  backbox.clList.remove('hidden');
  forceRepaint(backbox);
  overlay.clList.add('fade');
  panel.clList.add('slide');
});
panel.addEventListener("transitionend", function() {
  doent.querySelectorAll('.menu li').forEach(node => {
    node.clList.remove("hidden");
    node.clList.add('fadeInLeft');
  })
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-family: 'Roboto';
}
#toggle-on {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}
.navigation {
  background: #1f2937;
}
.menu-on {
  color: white;
  width: 2.3rem;
  height 2.3rem;
}
.overlay-container.hidden {
  display: none;
}
.overlay-container {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.overlay.fade {
  opacity: 0.6;
}
.overlay {
  position: absolute;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  background: black;
  transition: opacity 300ms ease-out;
}
.panel.slide {
  transform: translateX(0%);
}
.panel {
  position: absolute;
  height: 100vh;
  width: 18rem;
  background: #c00136;
  transform: translateX(-100%);
  transition: transform 300ms ease-out;
}
.menu {
  padding: 1rem 1rem;
  list-style-type: none;
}
.menu li.hidden {
  visibility: hidden;
}
.menu li {
  color: #f7f7f7;
  margin: 1rem 0;
}
.menu li.fadeInLeft {
  animation: fadeInLeft 350ms ease calc(var(--i) * 200ms) both;
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2em);
  }
  100% {
    opacity: 1;
  }
}

<div cl="navigation">
  <on id="toggle-on">
  <svg cl="menu-on" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
  </svg>
  </on>
  <div cl="overlay-container hidden">
    <div cl="overlay"></div>
    <div cl="panel">
      <ul cl="menu">
        <li cl="hidden" style="--i:1">Menu item #1</li>
        <li cl="hidden" style="--i:2">Menu item #2</li>
        <li cl="hidden" style="--i:3">Menu item #3</li>
        <li cl="hidden" style="--i:4">Menu item #4</li>
      </ul>
    </div>
  </div>
</div>

编辑我使用了 Roko C.Buljan 的答案中的代码片段来改变我的计时逻辑，因为我正在使用 javascript，它使示例变得更加简单。