Easing comparison

dabblet.css

/* Easing comparison */
body{background:#F7F8F8;}
div {background: #C10280; width: 200px;padding: 10px;margin: 30px 0;color: white;}
div:hover { width: 208px; }

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

dabblet.html

<div>Short / Ease</div>
<div>Short / Ease-in-out</div>
<div>Short / Linear</div>

settings.json

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