애니메이션 지연 후 사라지는 불투명도 추가하기

Question

내가하고 싶은 것은 페이지가로드 될 때 텍스트의 첫 번째 줄을 확대/축소하고 페이지가로드 된 후 두 번째 텍스트 줄을 만드는 것입니다.

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

: 여기

가 jsfiddle입니다 .. 나는 작업 애니메이션과 타이밍 사용하여 애니메이션 지연을 가지고,하지만 난 그냥 애니메이션의 시작 때까지 눈에 보이지 않는 텍스트의 두 번째 줄을 만드는 방법을 알아낼 수 없습니다

이 내 마크 업입니다 :

<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