title: How can I delay the start of a CSS animation?
body: <p>I'm trying to delay the trigger of a CSS animation (not slow down the animation itself, but delay it a few seconds before starting). And the image should not display before the animation runs. I looked through the other questions, and they don't seem to address this.</p>
  
  <p>MY FIDDLE: <a href="http://jsfiddle.net/omarel/guh5f8bs/" rel="noreferrer">http://jsfiddle.net/omarel/guh5f8bs/</a></p>
  
  <p>CSS</p>
  
  <pre><code>.slideRight{
  
      animation-name: slideRight;
      -webkit-animation-name: slideRight;   
  
      animation-duration: 1s;   
      -webkit-animation-duration: 1s;
  
      animation-timing-function: ease-in-out;   
      -webkit-animation-timing-function: ease-in-out;       
  
      visibility: visible !important;   
  }
  
  @keyframes slideRight {
      0% {
          transform: translateX(-150%);
      }
  
      100% {
          transform: translateX(0%);
      }   
  }
  
  @-webkit-keyframes slideRight {
      0% {
          -webkit-transform: translateX(-150%);
      }
  
      100% {
          -webkit-transform: translateX(0%);
      }
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="slideRight"&gt;
      HI
  &lt;/div&gt;
  </code></pre>
  
  <p>Side note: Also is there a way to get it to work with an <code>&lt;a&gt;</code> tag? Animations don't seem to play nice with this:</p>
  
  <pre><code>&lt;a class="slideRight"&gt;
      HI
  &lt;/a&gt;
  </code></pre>