title: CSS transition of fill color not working on hover out
body: <p>I have the fill color of the SVG path set to transition on hover. It works fine when you hover over the graphic, but the color snaps back when you hover out instead of transitioning back. What's going on?</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>body {
    background: rgb(0, 185, 228);
  }
  
  a.facebookIcon {
    display: inline-block;
    margin: 20px;
  }
  
  a.facebookIcon svg {
    width: 42px;
    height: 42px;
  }
  
  a.facebookIcon svg path {
    fill: rgb(255, 255, 255);
  }
  
  a.facebookIcon:hover svg path {
    fill: rgb(182, 52, 187);
    transition: fill 3000ms;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;a class="facebookIcon" href="#"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1017.78" viewBox="0 0 1024 1017.78"&gt;
    &lt;path d="M1024,512C1024,229.23,794.77,0,512,0S0,229.23,0,512c0,255.55,187.23,467.37,432,505.78V660H302V512H432V399.2C432,270.88,508.44,200,625.39,200c56,0,114.61,10,114.61,10V336H675.44c-63.6,0-83.44,39.47-83.44,80v96H734L711.3,660H592v357.78C836.77,979.37,1024,767.55,1024,512Z"/&gt;
  &lt;/svg&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>