Добавление исчезновения непрозрачности после отложенной анимации

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

Дать #line2opacity:0 с самого начала, а также animation-direction: forwards. Demo