延迟动画后添加不透明度消失

Question

我想要做的是让我的第一行文本在页面加载时放大+淡入，而我的第二行文本在页面加载后 2 秒。我让动画工作并使用动画延迟进行计时，但我只是不知道如何使第二行文本在动画开始之前不可见..

这是一个 jsfiddle：

http://jsfiddle.net/L2wcxg2f/2/

这是我的标记：

<center>
<h1><div id="line1">First</div><div id="line2">Second</div></h1>
</center>

这是我的 CSS：

#line1 {animation: onload 2s;}
#line2 {animation: onload 2s; animation-delay: 2s;}
@keyframes onload {from{opacity: 0.0; font-size: 170px;}to{opacity: 1.0; font-size: 120px;}

提前致谢！

Answer 1

在开始时提供#line2 opacity:0 以及animation-direction: forwards。 Demo