Animation without 0% or 100% keyframes

dabblet.css

/* Animation without 0% or 100% keyframes */
/* @estellevw sez this can sometimes be buggy */
/* ref: https://twitter.com/estellevw/status/40528526541066240 */
@keyframes middling {50% {background-color: #777;}}
div {
  width: 144px;
  height: 48px;
  margin: 24px;
  border: 5px solid #999;
  border-radius: 5px;
  padding: 3px;
}
div:hover {animation: middling 3s;}

dabblet.html

<h1>Animation with no 0% or 100% keyframes</h1>
<div>hover me</div>
<p>Works as expected in Chrome 16, Safari 5.1.2, Firefox 9</p>

settings.json

{"view":"split","fontsize":"90","seethrough":"","prefixfree":"1","page":"css"}