Css Animate Each List Item Seperate

I have the code snippet (HTML/CSS/JavaScript/jQuery). The question is about the

with the class items-list in the right div with the class list-div. I managed to animate

Solution 1:

You can use a custom property to pass the delay to each element with Javascript. You can use keyframes or simple transitions triggered by classes or aria-attributes (even better).

/* Simplified for reading */LISTELEMENTS.each ...
  ELEMENT.style.setProperty('--item-animiation-delay', ELEMENTINDEX * 100 +"ms");

@keyframes fade-to-left {
  from {
    opacity: 0;
    transform: 100%;
  }
  
  to {
    opacity: 1;
    transform: none;
  }
}


.ListItem {
  animation-name: fade-to-left;
  animation-duration: 600ms;
  animation-delay: var(--item-animiation-delay, 300ms);
}

Solution 2:

    ul.items-list {
        position: relative;
    }
    ul.items-list li {
        position: absolute;
    }
    ul.items-list li:nth-child(1) { top: 500px; transition: top .2s; opacity: 0; }
    ul.items-list li:nth-child(2) { top: 500px; transition: top .2s .2s; opacity: 0; }
    ul.items-list li:nth-child(3) { top: 500px; transition: top .2s .4s; opacity: 0; }
    ul.items-list li:nth-child(4) { top: 500px; transition: top .2s .6s; opacity: 0; }

    ul.items-list.bindDynamicclass li:nth-child(1) { top: 0; opacity: 1; }
    ul.items-list.bindDynamicclass li:nth-child(2) { top: 20px; opacity: 1; }
    ul.items-list.bindDynamicclass li:nth-child(3) { top: 40px; opacity: 1; }
    ul.items-list.bindDynamicclass li:nth-child(4) { top: 60px; opacity: 1; }

Bind some class(.bindDynamicclass) to ul.items-list on scroll using js.