Transitions

dabblet.css

/* Transitions */

div {
   background: black;
   width: 200px;
   padding: 10px;
   margin: 20px 0;
   color: white
}
div:hover {
   width: 500px;
}
div:nth-child(n+3):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; }
div:nth-child(4) { transition: 0.4s linear; }

dabblet.html

<div>Long / Ease (nice)</div>
<div>Long / Linear (stiff)</div>

<div>Short / Ease (jerky)</div>
<div>Short / Linear (nice)</div>

settings.json

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