Easing comparison

dabblet.css

/* Easing comparison */
body{background:#F7F8F8;}
div {background: #C10280; width: 200px;padding: 10px;margin: 30px 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 ease-in-out; }
div:nth-child(3) { transition: 0.4s linear; }

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

dabblet.html

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


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

settings.json

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