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
Post a Comment