css3 - How to FadeIn a parent element and then it's child elements with a slight Delay (CSS Only) -
i want fadein
body element , fadein
1 of it's child slight delay.
i've tried it's not working
body { animation: fadein 0.5s; } header { animation: fadein 2s; } @keyframes fadein { { opacity: 0; } { opacity: 1; } }
i've tried using animation-delay
didn't help.
body { animation: fadein 0.5s forwards; /* use forwards maintain last keyframe state */ } header { opacity:0; /* need initial opacity */ animation: fadein 2s 1s forwards; /* 1s delay */ } @keyframes fadein { { opacity: 0; } { opacity: 1; } }
p.s: not sure if body
best parent option, here's example uses div parent:
html, body{height:100%;} #page { height:100%; background:green; animation: fadein 0.5s forwards; } header { opacity:0; animation: fadein 2s 1s forwards; } @keyframes fadein { { opacity: 0; } { opacity: 1; } }
<div id="page"> <header>this header</header> </div>
Comments
Post a Comment