title: Elements with animation delay briefly appear before fading in using purely CSS3 Keyframes (no JS)
body: <p>So I want to have a few elements in my header that slide up and fade in on page load using CSS3 Keyframes.  While the animation itself works fine, the elements with a delay on them appear for a split second in their final state before animating.  I currently don't know any JavaScript so I was hoping there is a solution for this purely in HTML/CSS.  Can it be done?</p>
  
  <p><a href="https://jsfiddle.net/nolder/nrkckt8n/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    font-family: 'Varela', sans-serif;
  }
  
  body {
    padding: 0;
    margin: 0;
    background-color: rgb(90, 120, 240);
  }
  
  a {
    text-decoration: none;
    color: inherit;
    font-size: inherit;
  }
  
  /***************************
  HEADER
  ***************************/
  
  .header-banner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    height: 250px;
    -webkit-animation: slide-in 1s;
    -moz-animation: slide-in 1s;
    -o-animation: slide-in 1s;
    animation: slide-in 1s;
    padding: 0 0 60px 0;
  }
  
  .header-banner h1,
  .header-banner h2,
  .header-banner a {
    font-family: 'Varela', sans-serif;
    color: white;
    text-align: center;
    padding: 0 40px;
    margin: 10px 0;
  }
  
  .header-banner h2,
  .header-banner a {
    font-weight: normal;
  }
  
  .header-banner h1 {
    font-size: 2em;
    -webkit-animation: slide-in 1s;
    -moz-animation: slide-in 1s;
    -o-animation: slide-in 1s;
    animation: slide-in 1s;
  }
  
  .header-banner h2 {
    font-size: 1.2em;
    -webkit-animation: slide-in 1s 0.2s forwards;
    -moz-animation: slide-in 1s 0.2s forwards;
    -o-animation: slide-in 1s 0.2s forwards;
    animation: slide-in 1s 0.2s forwards;
  }
  
  .header-banner a {
    font-size: 0.9em;
    font-weight: bolder;
    padding: 15px 40px;
    border-radius: 5px;
    letter-spacing: 0.05em;
    background-color: rgb(0, 221, 221);
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    transition: 0.3s ease-in-out;
    margin-top: 60px;
    -webkit-animation: slide-in 1s 0.4s forwards;
    -moz-animation: slide-in 1s 0.4s forwards;
    -o-animation: slide-in 1s 0.4s forwards;
    animation: slide-in 1s 0.4s forwards;
  }
  
  .header-banner a:hover {
    transition: 0.3s ease-in-out;
    box-shadow: 0 6px 10px rgba(50, 50, 93, .16), 0 2px 10px rgba(0, 0, 0, .1);
    transform: translateY(-2px);
  }
  
  
  /******************************
  KEYFRAMES
  ******************************/
  
  @-o-keyframes slide-in {
    0% {
      transform: translateY(40px);
      opacity: 0;
    }
    100% {
      transform: translateY(0px);
      opacity: 1;
    }
  }
  
  @-moz-keyframes slide-in {
    0% {
      transform: translateY(40px);
      opacity: 0;
    }
    100% {
      transform: translateY(0px);
      opacity: 1;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;div class="header-banner"&gt;
      &lt;h1&gt;&amp;lt;h1&amp;gt; element (no delay)&lt;/h1&gt;
      &lt;h2&gt;I'm an &amp;lt;h2&amp;gt; element with 0.2s of delay&lt;/h2&gt;
      &lt;a href="about.html"&gt;I'm an &amp;lt;a&amp;gt; element with 0.4s of delay&lt;/a&gt;
    &lt;/div&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>