title: css3 sequential animation for parent and child elements
body: <p>How can I make the animation of a child element to occur after the parent has done its animation, i.e. the parent div fades in then its child element fades in 1 second later?</p>
  
  <p>I have tried many tricks but nothing works, the child element is still fading at the same time as the parent.</p>
  
  <p>Please see here: <a href="http://jsfiddle.net/oeLbh43o/" rel="nofollow">http://jsfiddle.net/oeLbh43o/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;h1&gt;The Title Here&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.parent {
      width: 250px;
      height: 250px;
      background: #fff;
      border: 1px solid #000;
      -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      padding: 10px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
  }
  
  .parent h1 {
      -webkit-transition: all 0.9s ease-in-out;
      -moz-transition: all 0.9s ease-in-out;
      transition: all 0.9s ease-in-out;
      opacity: 0;
  }
  
  .parent:hover {
      width: 300px;
      height: 300px;
  }
  .parent:hover h1 {
      opacity: 1;
      -webkit-animation-delay: 5s;
      -moz-animation-delay: 5s;
      animation-delay: 5s;
  }
  </code></pre>
  
  <p>Many Thanks</p>