CSS Transitions test cases

dabblet.css

/* CSS Transitions test cases */
/* ref: http://meyerweb.com/eric/thoughts/2011/03/24/inconsistent-transitions/
        http://dev.w3.org/csswg/css3-transitions/#starting */

div {width: 80px; height: 80px; border: 1px solid #ccc;}
div > div {width: 50px; height: 50px; margin: 14px; border-color: #777;}
/* transition on mouseover, not mouseout (snaps back) */
.one:hover div {transition: transform 1s linear; transform: rotate(270deg);}
/* transition on default state: transitions both ways */
.two div {transition: transform 1s linear;}
.two:hover div {transform: rotate(270deg);}
/* different transition on mouseout (3s) and mouseover (.5s, :hover overrides) */
.three div {transition: transform 3s linear;}
.three:hover div {transition: transform .5s linear; transform: rotate(270deg); 
/* never transitioned because the transform applies first on mouseover, and transition doesn’t apply on mouseout */
.four:hover div {transform: rotate(270deg);}
.four div:hover {transition: transform 1s linear;}
/* note: transition not inherited by child */
.five {transition: transform 3s linear;}
.five:hover div {transform: rotate(270deg);}

dabblet.html

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

settings.json

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