html - Adding opacity disappearing after delayed animation -



html - Adding opacity disappearing after delayed animation -

what want create first line of text kind of zoom+fade in when page loaded, , sec line of text 2s after page loaded. got animations working , timing using animation-delay, can't figure out how create sec line of text invisible until start of animation..

here's jsfiddle:

http://jsfiddle.net/l2wcxg2f/2/

this markup:

<center> <h1><div id="line1">first</div><div id="line2">second</div></h1> </center>

and 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;}

thanks in advance!

give #line2 opacity:0 @ start , animation-direction: forwards. demo

html css animation opacity transitions

Comments

Popular posts from this blog

formatting - SAS SQL Datepart function returning odd values -

c++ - Apple Mach-O Linker Error(Duplicate Symbols For Architecture armv7) -

php - Yii 2: Unable to find a class into the extension 'yii2-admin' -