stagger animate elements

stagger-elements

 <!-- HTML -->

  <button>click</button>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>


/* CSS */

ul li {
    position: relative;
    opacity: 0;
    transform: translateX(20px);
    -webkit-transition: transform .5s ease-in-out, opacity .75s ease-in-out;
    -moz-transition: transform .5s ease-in-out, opacity .75s ease-in-out;
    -ms-transition: transform .5s ease-in-out, opacity .75s ease-in-out;
    -o-transition: transform .5s ease-in-out, opacity .75s ease-in-out;
    transition: transform .5s ease-in-out, opacity .75s ease-in-out;
}

ul.active li {
    opacity: 1;
    transform: translateX(0px);
}


// jquery

$("button").click(function(){
  $('ul').toggleClass('active');
});


let listitem = $('ul li');

for (let i = 0; i < listitem.length; i++) {
  listitem[i].style.transitionDelay = i * 100 + 'ms';
}