Transitions

dabblet.css

/* Transitions */

div {
   background: #f9e;
   width: 200px;
   padding: 10px;
   margin: 40px 0;
   color: white
}
div:hover {
   width: 500px;
}
div:nth-child(n+4):hover { width: 208px; }

div:nth-child(1) { transition: 0.4s ease; }
div:nth-child(2) { transition: 0.4s linear; }
div:nth-child(3) { transition: 0.4s ease-in-out; }

div:nth-child(4) { transition: 0.4s ease; }
div:nth-child(5) { transition: 0.4s linear; }
div:nth-child(6) { transition: 0.4s ease-in-out; }

dabblet.html

<div>Long / Ease (nice)</div>
<div>Long / Linear (stiff)</div>
<div>Long / Ease-in-out</div>

<div>Short / Ease (jerky)</div>
<div>Short / Linear (nice)</div>
<div>Short / Ease-in-out</div>

settings.json

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