Transitions bug with links

dabblet.css

/* Transitions bug with links */
/* ref: http://jsfiddle.net/sMH9K/embedded/result,html,css/ */
body {background-color: #ccc;}
a {
  font-size: 300%;
  color: blue;
  transition: all 1s linear;
}
a:visited {color: yellow;}
a:visited:hover, a:hover, a:focus, a:active {color: red;}
.orange {background-color: orange;}
.purple {background-color: purple;}

dabblet.html

<ul>
<li><a>no href link</a></li>
<li><a href="#">in-page # link</a></li>
<li><a href="http://google.com">Google link <span class="orange">☺</span><span class="purple">☹</span></a> (prolly visited, visit if not)</li>
<li><a href="http://somerandomwebsite.com">unvisited link</a></li>
</ul>
<p><strong>Fail:</strong> Safari 5.12, Chrome 15, FF 9 — a visited link swaps to blue when hovered then transitions to red (through purple)</p>
<p><strong>Success:</strong> Opera 11.60, Chrome 16 — it transitions from yellow to red (through orange)</p>
<p><i>Apologies for the colors ;)</i></p>

settings.json

{"version":"1.1","settings":{"prefixfree":"1"},"view":[{"title":"CSS & Result","template":"r\nc","active":false,"seethrough":false},{"title":"HTML & Result","template":"r\nh","active":true,"seethrough":false},{"title":"Result","template":"r","active":false,"seethrough":false}]}