CSS Animations timing functions edge cases

dabblet.css

/* CSS Animations timing functions edge cases */
/* steps, “bounce”, different units (px → %) */
.box {
  width: 124px;
  height: 32px;
  margin: 24px;
  border: 5px solid #999;
  border-radius: 5px;
  padding: 3px;
}
.wrapper:hover .default {animation: fatty 1s linear forwards;}
.wrapper:hover .steps {animation: fatty 1s steps(3,end) forwards;}
.wrapper:hover .bounce {animation: fatty 1s cubic-bezier(.7,-.2,.2,1.3) forwards;}
.wrapper:hover .defaultp {animation: fattyp 1s linear forwards;}
.wrapper:hover .stepsp {animation: fattyp 1s steps(3,end) forwards;}
.wrapper:hover .bouncep {animation: fattyp 1s cubic-bezier(.7,-.2,.2,1.3) forwards;}
@keyframes fatty {to {width: 800px;}}
@keyframes fattyp {to {width: 80%;}}

dabblet.html

<div class="wrapper">
<div class="box default">default px → px</div>
<div class="box steps">steps px → px</div>
<div class="box bounce">bounce px → px</div>
<div class="box defaultp">default  px → %</div>
<div class="box stepsp">steps px → %</div>
<div class="box bouncep">bounce px → %</div>
</div>
<ul>
<li>Firefox 9 — as expected</li>
<li>Chrome 16 — same units as expected, different units instant</li>
<li>Safari 5.1.2 — same units as expected, different units instant, <code>cubic-bezier()</code> with bounce doesn’t animate at all</li>
</ul>

settings.json

{"version":"1.1","settings":{"prefixfree":"1"},"view":[{"template":"r\nc","active":false,"seethrough":false},{"template":"r\nh","active":true,"seethrough":false},{"template":"r\nch","active":false,"seethrough":false}]}