css - 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

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

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