How to FadeIn a parent element and then it's child elements with a slight Delay (CSS Only)


Tags: css,css3,css-animations

Problem :

I want to fadein the body element and then fadein one of it's child with a slight delay.

I've tried this but it's not working

body {
    animation: fadein 0.5s;
}

header {
    animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

I've also tried using animation-delay but that didn't help.



Solution :

body {
  animation: fadein 0.5s forwards; /* use forwards to maintain the last  keyframe state */
}

header {
  opacity:0;      /* You need this initial opacity */
  animation: fadein 2s 1s forwards; /* 1s is the delay */
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

P.S: not sure if body is the best parent option, but here's an example that uses a 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 {
  from { opacity: 0; }
  to   { opacity: 1; }
}
<div id="page">
  <header>THIS IS HEADER</header>
</div>


    CSS Howto..

    How to make an arrow in html5 or css

    How to change particular cells color using css in Ext.ux.touchcalendar in sencha touch

    How to put banner in css?

    How to determine the exact 'font-family' CSS value of an uploaded TrueType font?

    How to to select the last class or last of type in css

    Border-bottom not showing correctly

    how to create a tirangle and square with ccs only?

    How to reduce shiny interactive rmarkdown margins?

    How to control cursor/caret size with CSS

    How to edit Skype contact me button CSS?

    Beginner: How to get a fixed element to a left position (float left?) - JSFiddle included

    How to make vertical menu with emenu extension in Yii?

    How to position an image list marker so that the text is vertically centered

    How to move div to top and remove?

    How can i get spaces between images with the same class?

    How do i position a div relative to the window page (responsive css)

    How to say that you need to turn your mobile phone in javascript/css? [closed]

    How to adjust the height of the footer automatically

    How to make a div fall on hover and stay at at the bottom of the page using jquery or css?

    How to remove default document style from an element using Javascript

    how to append an icon to an input search?

    How to align CSS Input type Text Placeholder Image

    How to change horizontal block-level elements to vertical elements after specific width?

    How to rotate a picture using css and javascript

    “Dynamic” CSS id names? How to add them to the CSS file?

    How to change
  • to variable width on css dropdown submenu
  • CSS Sub Menu shows up outside body

    How to set all CSS values to their default? [duplicate]

    How to include transparency in html/css?

    how to set max size of a counter?