Question

我正在使用以下CSS文件，以便为我正在构建的网站添加一些动画： http://www.justinaguilar.com/animations/scrolling.html

它的概念非常简单 - 你可以在你的div中添加类名，以便在向上/向下滚动页面时将其设置为动画。

我想在那里添加一个调整，这会在每个动画之间添加一点延迟。这样，同一行中的所有动画将逐一出现，而不是同时出现在一起。

我的想法是添加一个类名，例如： delay-1 ，它会添加 animate-delay：1s ;它。

以下是我想要做的实例。向下滚动，看看“我们的进度”如何以延迟显示每个动画：

http://demo.qodeinteractive.com/river/home-anchors/#home_presentation

这是我能用CSS3做的吗？无论答案是肯定还是否定，我都会非常感谢任何帮助。

Answer 1

尝试像这样定义类：

.delay-1 {
    animation-delay:1s !important;
    -webkit-animation-delay:1s !important;
}

不知道它是否会起作用......但值得一试 ..是的...它会完成这项工作 - 它对我有用

Answer 2

是的，CSS3过渡将起到作用，我很久以前就设置了一个演示页面。你可以参考它..

如您所见，第一项有2s延迟，第二项没有延迟。祝你好运

#demo:hover {
width: 300px;
transition-delay: 2s
}

#demo1:hover {
width: 300px;
transition-delay: 0s
}

http://jsfiddle.net/zFbkL/

Answer 3

当您通过Javascript滚动到该部分时，您仍然需要为该部分添加一个类，但您可以使用nth-child()来定位每个类。

让我们说你可以做4个步骤：

.steps .step:nth-child(1) { transition-delay: 1s; }
.steps .step:nth-child(2) { transition-delay: 2s; }
.steps .step:nth-child(3) { transition-delay: 3s; }
.steps .step:nth-child(4) { transition-delay: 4s; }

尽管如此，如果步骤数量不明，那么我认为最好不要编写脚本。

$('.steps .step').each(function(i){
  $(this).css('animation-delay', i + 's');
});

然后，通过向.steps添加一个类来启动动画。

.steps .step { trainsition: all 1s; opacity: 0; width: 0;}
.steps.in-view .step { opacity: 1; width: auto; }

希望这是你的目标。

当“animate-delay：1s;”时隐藏div仍然在进行并在延迟后显示

3 个答案: