CODEWITHSUNDEEP
htmlcssanimationcss-animations
Richard Bustos
Richard Bustos

Reputation: 3018

Making each <li> animate later than the previous one

Say if i have an un ordered list of red background blocks.

I want the animation to target each li and have a stretching type affect.

how can i make each list animate with different speeds? The animation should have a delay going over each li.

example:

first li stretches, then the second li stretches, so on and so on.

li {
  margin: 5px;
  background-color: red;
  animation: stretch 2`enter code here`s;
}

@keyframes stretch {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Upvotes: 0

Views: 145

Answers (1)

Raman
Raman

Reputation: 1281

I think you would need some JavaScript to do this. Please follow this link and see if it works.Here is the jQuery snippet that I have written:

$(function(){
    var delay = 0;
    $('ul>li').each(function(){
        var $this = $(this);
        $this.css('animation', 'stretch 2s');
        $this.css('animation-delay', delay+'s');
        $this.on("webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend", function(){
            $this.width('100%');
        });
        delay += 2;
    });
});

Upvotes: 1

Related Questions