title: CSS triangle to transition between two colors
body: <p>I have a triangle made in CSS and I want it to slowly transition between two colors <strong>without</strong> the use of a <code>hover</code> state.</p>
  
  <pre><code>.arrow-down {
      width: 0; 
      height: 0; 
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 20px solid $mgrey;
   }
  </code></pre>
  
  <p>I've tried putting something like <code>transition: color 0.3s;</code> but that does not seem to work. Would I have to use JavaScript to achieve the affect I'm after or can it be done in pure CSS?</p>
  
  <p>Thanks.</p>