title: CSS animation starts after certain amount of time
body: <p>I have been trying to figure this out for some time now, no success so far though: I want to run a typing animation using CSS. The animation has to start after 7 seconds. I can't figure out how to do this tho. My code looks like this:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class='background-fullwidth'&gt;    
      &lt;div class="css-typing"&gt;
        This text will pop up using an typewriting effect
      &lt;/div&gt;        
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.css-typing  {
      width: 360px;
  
      white-space: nowrap;
      overflow: hidden;
      -webkit-animation: type 3s steps(50, end);
      animation: type 3s steps(55, end);
      -o-animation: type 5s steps(50, end);
      -moz-animation: type 3s steps(55, end);
  
      padding: 10px;
  }
  
  .background-fullwidth {
    width: 400px;
    background-color: rgba(0, 50, 92, 0.7);
  }    
  
  @keyframes type {
      from { width: 0; }
      to { width: 360px; }
  }
  
  @-moz-keyframes type {
      from { width: 0; }
      to { width: 360px; }
  }
  
  @-webkit-keyframes type {
      from { width: 0; }
      to { width: 360px; }
  }
  </code></pre>
  
  <p>Does anyone know how to add this timer - let's say the animation has to start after 7 seconds? From second 1 to 7 only the wraping DIV (blue background) has to be shown.</p>
  
  <p><strong>Fiddle</strong> looks like this:
  <a href="https://jsfiddle.net/vtdyuju4/2/" rel="nofollow noreferrer">CSS Animation</a></p>