title: Trigger animation on element click in pure CSS
body: <p>Let's say I have a simple element:</p>
  
  <pre><code>&lt;a href="#" id="btn" onclick="return false"&gt;Click&lt;/a&gt;
  </code></pre>
  
  <p>Now I can change the look of this element on click via <code>:active</code>:</p>
  
  <pre><code>#btn:active {
      background: red;
  }
  </code></pre>
  
  <p>What I'd like however is that the element will stay red for about a second after I clicked it without altering the HTML (so no checkbox hack) or javascript. Is there a smart trick that can be abused for this?</p>
  
  <p><a href="http://jsfiddle.net/s3G7p/" rel="noreferrer">JsFiddle here</a></p>