代码之家 › 专栏 › 技术社区 › Adam Pietrasiak

CSS3动画一个接一个延迟

css-transitions css

Adam Pietrasiak · 技术社区 · 11 年前

我有一些 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解决方案。

2 回复 | 直到 11 年前

avrahamcool 11 年前

你可以使用 transition-delay 所有物阅读更多信息 here , or here

看看这个 Working Fiddle

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

如果你有少量不变的元素,你可以用丑陋的方式(同样:最好的方式是通过脚本)

#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..