Add translate3d for each element in menu with delay

Question

I need to do an translate3d for my menu,

I need to create animation like this menu in this site in mobile ( https://www.micai.aristidebenoist.com/ ).

You can see translate3d how can work, its show as slow animation

i try more code but i cannot do like it

My code :

$('.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>

How can do it!