CSS动画延迟不起作用

Question

尝试淡入一个div...然后7秒后，再淡入另一个div。我无论如何都想不出为什么它不起作用。动画本身是可以工作的（淡入/淡出动画），但我需要“going” div在一定时间后淡入。有人知道如何正确实现吗？

.coming{
    width:320px;
    height:auto;
    position:absolute;
    top:0px;
    left:0px;
    margin-left:10px;
    background:#FFF;
    color:#000;
    font-family: Sans-Serif;
    font-size:24px;
    border-radius: 10px 10px 10px 10px;
    -moz-box-shadow: 0px 0px 0px #000;
    -webkit-box-shadow: 0px 0px 0px #000;
    box-shadow: 1px 1px 5px #222;
    padding:2px 20px;

    }

#people .coming{
    -moz-animation: fadein 3s ease-in; /* Firefox */
    -webkit-animation: fadein 3s ease-in; /* Safari and Chrome */
    -o-animation: fadein 3s ease-in; /* Opera */
    animation: fadein 3s ease-in;
}


.going{
    width:320px;
    height:auto;
    position:absolute;
    top:120px;
    left:0px;
    margin-left:10px;
    background:#FFF;
    color:#000;
    font-family: Sans-Serif;
    font-size:24px;
    border-radius: 10px 10px 10px 10px;
    -moz-box-shadow: 0px 0px 0px #000;
    -webkit-box-shadow: 0px 0px 0px #000;
    box-shadow: 1px 1px 5px #222;
    padding:2px 20px;
}


#people .going{
    animation-delay: 7s;
    -moz-animation: fadein 3s ease-in; /* Firefox */
    -webkit-animation: fadein 3s ease-in; /* Safari and Chrome */
    -o-animation: fadein 3s ease-in; /* Opera */
    animation: fadein 3s ease-in;

}

谢谢。这里是代码片段： http://jsfiddle.net/yZ4va/1/

- Ian Providence

Answer 1

使用以下代码作为你的.going类。动画属性中的forwards将确保在执行最后一个关键帧后方块不会返回到opacity:0（不可见）。

#people .going{
    opacity: 0;
    -moz-animation: fadein 3s ease-in 7s forwards; /* Firefox */
    -webkit-animation: fadein 3s ease-in 7s forwards; /* Safari and Chrome */
    -o-animation: fadein 3s ease-in 7s forwards; /* Opera */
    animation: fadein 3s ease-in 7s forwards;
}

上面是指执行动画延迟的简写方式。 演示。

- Harry

---

Harry，这正是我想要做的。感谢大家的帮助。 - Ian Providence

如果浏览器不支持动画，那怎么办？透明度仍将被应用为0。有什么解决方法吗？ - Etienne Dupuis

@EtienneDupuis：你可以像这个片段中那样做（http://jsfiddle.net/yZ4va/144/）。这避免了需要使用`opacity: 0（请注意animation-fill-mode从forwards更改为both`）。我没有不支持动画的浏览器，所以无法测试，但我相当确定它应该可以工作。 - Harry

@Harry 确切无误！animation-fill-mode必须设置为both。非常感谢。 - Etienne Dupuis

Answer 2

问题出在订单和缺失的浏览器特定名称上：

任何具体属性需要在更通用的行之后指定，否则它们将被覆盖。

你还错过了在转换div时初始的opacity: 0（它一开始是可见的）。 运行的示例已更新，感谢@Harry和@VikasGhodke指出了这一点，并添加了forwards。

#people .going{
    -moz-animation: fadein 3s ease-in forwards; /* Firefox */
    -webkit-animation: fadein 3s ease-in forwards; /* Safari and Chrome */
    -o-animation: fadein 3s ease-in forwards; /* Opera */
    animation: fadein 3s ease-in forwards;
    -moz-animation-delay: 7s;
    -webkit-animation-delay: 7s;
    -o-animation-delay: 7s;
    animation-delay: 7s;
}

您可以通过在缩写语法中包含动画延迟来避免整个特定样式被覆盖的问题，如下所示：

示例代码

#people .going{
    -moz-animation: fadein 3s ease-in 7s forwards; /* Firefox */
    -webkit-animation: fadein 3s ease-in 7s forwards; /* Safari and Chrome */
    -o-animation: fadein 3s ease-in 7s forwards; /* Opera */
    animation: fadein 3s ease-in 7s forwards;
}

- dc5

---

添加“opacity:0”将使得在动画后，going类消失。 - Vikas Ghodke

嗨dc5，感谢您的帮助。您的解决方案确实比我尝试的要好，但是一旦“going” div完全淡入，它就会完全消失，我希望它能留在屏幕上。有什么建议吗？我尝试将不透明度设置回1，但似乎没有起作用。谢谢您的帮助。 - Ian Providence

@IanProvidence 不想插入dc5的答案，但你可以尝试将模式设置为forwards，就像我在我的答案中提到的那样，以克服这个问题。 - Harry

是的 - 请参考@VikasGhodke和Harry的评论 - 我会更新fiddle并回答。 - dc5

Answer 3

你在设置延迟时会覆盖它，所以请在动画之后指定延迟。但是会出现另一个问题，"going" 会先显示，然后在延迟后消失，再重新显示，这不是一个好的做法。

请查看此fiddle。

#people .going{
    -moz-animation: fadein 3s ease-in; /* Firefox */
    -webkit-animation: fadein 3s ease-in; /* Safari and Chrome */
    -o-animation: fadein 3s ease-in; /* Opera */
    animation: fadein 3s ease-in;
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
}

另一个选择是调整时间和时间函数。

查看这个fiddle

.coming{
    -moz-animation: fadein 3s ease-in; /* Firefox */
    -webkit-animation: fadein 3s ease-in; /* Safari and Chrome */
    -o-animation: fadein 3s ease-in; /* Opera */
    animation: fadein 3s ease-in;
    }

.going{
    animation: fadein 10s ease-in-out;
    -moz-animation: fadein 10s ease-in-out; /* Firefox */
    -webkit-animation: fadein 10s ease-in-out; /* Safari and Chrome */
    -o-animation: fadein 10s ease-in-out; /* Opera */
}

- Vikas Ghodke