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

Popular posts from this blog

dns - How To Use Custom Nameserver On Free Cloudflare? -

python - Pygame screen.blit not working -

c# - Web API response xml language -