title: Unwanted transition on :active css
body: <p>I've just started learning html &amp; css and I'm not entirely sure what I'm doing but..</p>
  
  <p>I've added a :hover transition so that when I hover over my header "FIENDS" it fades from #000000 to #800000. Which I've implemented and which works. I've also added the css :active, so that when I click my header "FIENDS" it instantly switches from #800000 to #ffffff. But at the moment it isn't instantly switching, it seems to be using the transition I set up for the :hover and fading to #ffffff. Does anyone have a solution to this?</p>
  
  <p>Thanks.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Fiends&lt;/title&gt;
          &lt;link href="style.css" type="text/css" rel="stylesheet" /&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
          &lt;meta name="description" content="Fiends" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;h1 class="centertext"&gt;&lt;fade&gt;FIENDS&lt;/fade&gt;&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html {
      background-color: #ffffff}
  
  body {
      font-family: bebas neue;
      text-align: center;}
  
  h1 {
      color: #000000;
      font-weight: normal;
      font-size: 200px;
      letter-spacing: 15px;}
  
  h1.centertext {
      margin: 225px auto auto auto}
  
  fade { 
      color: #000000; 
      -webkit-transition: color .12s linear;
      -moz-transition: color .12s linear;
      -ms-transition: color .12s linear;
      -o-transition: color .12s linear;
      transition: color .12s linear;}
  
  fade:hover {
      color: #800000;}
  
  fade:active {
      color: #ffffff}
  </code></pre>