Question

假设我有一个无序的红色背景块列表。

我希望动画定位每个li并具有拉伸类型效果。

如何以不同的速度制作每个列表的动画？动画应该延迟每个li。

示例：

第一个李伸展，然后第二个李拉伸，依此类推。

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>

Answer 1

我认为你需要一些JavaScript才能做到这一点。请按照this链接查看是否有效。这是我写的jQuery代码段：

$(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;
    });
});

使每个<li>的动画比上一个更晚

1 个答案: