CSS3 延迟地一个接一个地动画

Question

>在这里小提琴 -

我有一些divs有一些 css3 过渡。是否可以不一次对每个项目应用此转换，而是在每个项目之后应用100ms delay？

#main div {
    opacity: 0;
    transition: 1s opacity;
}
#main.active div{
    opacity: 1;
}

那么当我将.active类添加到#main时，它的子级不会一下子改变它的不透明度，而是一次又一次地改变？

我知道这可以很容易地完成

$('.setOfItems').each(function(i){ $(this).delay(100*i).doSth() })

但我正在寻找 css3 解决方案。

Answer 1

您可以使用 transition-delay 属性。阅读更多关于它的信息 这里 ，或 这里

看看这个工作小提琴

通过为不同的元素设置不同的网络延迟，它们将出现在不同的时间。但是如果你要设置一堆具有不同延迟的不同类，CSS 会看起来很混乱，所以你应该应用脚本中的延迟（类似于你在问题中建议的内容）。

如果你有少量且恒定的元素，你可以用丑陋的方式去做（再次：最好的方法是通过脚本）

#main div:first-child
{
    transition: 1s opacity 200ms; /*BTW this is the short way of using transition with the duration, property, delay*/
}
#main div:nth-child(2)
{
    transition: 1s opacity 400ms;
}
#main div:nth-child(3)
{
    transition: 1s opacity 600ms;
}
etc..

Answer 2

有一种方法，但不完全支持，请查看关键帧。

然后，您需要为每个元素创建不同的类。