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

Question

Fiddle here -

我有一些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属性。 详细了解here，or here

查看此Working Fiddle

通过为不同的元素设置不同的延迟，它们将在不同的时间出现。 但是如果你设置一堆具有不同延迟的不同类，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

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

然后你需要创建不同类的每个元素。