CSS Animations we’d like to use

dabblet.css

/* CSS Animations we’d like to use */
/*
the spec doesn’t allow these atm:
1 background-image
2 gradients
3 float
5 display between none & anything
6 position between static and absolute
6 height/width (plus top/right/bottom/left) between auto & a length/% (ref: 7,8)
7 max-height/max-width workaround for height/width
8 WebKit *can* transition top/right/bottom/left btwn auto & a length/%,
 but not according to spec (prolly treating auto as 0 so a bug),
 & FF can’t and based on transitions bug prolly won’t, 
 ref:https://bugzilla.mozilla.org/show_bug.cgi?id=571344

ref: http://dabblet.com/gist/1524023 for Transitions
*/
.working div {background-color: rgba(123,146,159,.5);}
.working:hover div {animation: working 1s;}
.one div {background-image: url('http://placekitten.com/80/50/');}
.one:hover div {animation: one 1s;}
.two div {background: linear-gradient(90deg,#cde,#789);}
.two:hover div {animation: two 1s;}
.three div {float: left;}
.three:hover div {animation: three 1s;}
.four div {display: block;}
.four:hover div {animation: four 1s;}
.five div {position: static;}
.five:hover div {animation: five 1s;}
.six div {height: auto;} /* must be length or %, so a fixed height works, but… :| */
.six:hover div {animation: six 1s;}
.seven div {max-height: 100%;} /* width/height workaround */
.seven:hover div {animation: seven 1s;}
.eight div {position: absolute; left: auto;}
.eight:hover div {animation: eight 1s;}
@keyframes working {0% {background-color: rgba(215,235,255,.7);}}
@keyframes one {0% {background-image: none;}}
@keyframes two {0% {linear-gradient(90deg,#345,#678);}}
@keyframes three {0% {float: right;}}
@keyframes four {0% {display: none;}}
@keyframes five {0% {position: absolute; right: 0;}}
@keyframes six {0% {height: 0;}}
@keyframes seven {0% {max-height: 0;}}
@keyframes eight {0% {left: 80%;}}

div {height: 74px; border-bottom: 1px solid #eee; padding-top: 15px;}
div > div {width: 80px; height: auto; border: 1px solid #999; padding: 0; clear: left; line-height: 50px;}

dabblet.html

<div class="working"><div>working</div></div>
<div class="one"><div>one</div></div>
<div class="two"><div>two</div></div>
<div class="three"><div>three</div></div>
<div class="four"><div>four</div></div>
<div class="five"><div>five</div></div>
<div class="six"><div>six</div></div>
<div class="seven"><div>seven</div></div>
<div class="eight"><div>eight</div></div>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"result"}