交错动画

为列表的元素创建一个交错动画。

• 设置 opacity: 0 和 transform: translateX(100%)，使列表元素透明并将它们全部移动到最右边。
• 为列表元素指定相同的 transition 属性，除了 transition-delay。
• 使用内联样式为每个列表元素指定一个 --i 的值。这个值将用于 transition-delay，以创建交错效果。
• 使用 :checked 伪类选择器为复选框设置样式，将 opacity 设置为 1，将 transform 设置为 translateX(0)，使它们出现并滑入视图中。

<div class="container">
  <input type="checkbox" name="menu" id="menu" class="menu-toggler">
  <label for="menu" class="menu-toggler-label">菜单</label>
  <ul class="stagger-menu">
    <li style="--i: 0">首页</li>
    <li style="--i: 1">定价</li>
    <li style="--i: 2">账户</li>
    <li style="--i: 3">支持</li>
    <li style="--i: 4">关于</li>
  </ul>
</div>

.container {
  overflow-x: hidden;
  width: 100%;
}

.menu-toggler {
  display: none;
}

.menu-toggler-label {
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}

.stagger-menu {
  list-style-type: none;
  margin: 16px 0;
  padding: 0;
}

.stagger-menu li {
  margin-bottom: 8px;
  font-size: 18px;
  opacity: 0;
  transform: translateX(100%);
  transition-property: opacity, transform;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.750, -0.015, 0.565, 1.055);
}

.menu-toggler:checked ~ .stagger-menu li {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(0.055s * var(--i));
}