延迟为菜单中的每个元素添加translate3d

Question

我需要为菜单做一个translate3d，

我需要在此网站的移动版（https://www.micai.aristidebenoist.com/上创建类似此菜单的动画。

您可以看到translate3d的工作原理，它显示为慢速动画

我尝试更多代码，但我不能喜欢它

我的代码：

$('.menu-trigger').on('click', function() {
  $('#menu-slide-menu li').each(function() {
    $('#menu-slide-menu li').css('transform', 'translate3d(0%, 0px, 0px)');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-trigger">Menu</div>
<ul id="menu-slide-menu">
  <li class="element">bla bla</li>
  <li class="element">bla bla</li>
  <li class="element">bla bla</li>
  <li class="element">bla bla</li>
</ul>

怎么做！