CSS Transitions we’d like to use

dabblet.css

/* CSS Transitions we’d like to use */
/*
the spec doesn’t allow these atm:
1 background-image
2 gradients
3 float
4 display between none & anything
5 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/prolly won’t, 
 ref: https://bugzilla.mozilla.org/show_bug.cgi?id=571344

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

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"}