Tryit Editor v1.8

Source Code:
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:50px; background:red; color:white; font-weight:bold; transition:width 2s; -webkit-transition:width 2s; /* Safari */ } #div1 {transition-timing-function: cubic-bezier(0,0,0.25,1);} #div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);} #div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);} #div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);} #div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);} /* Safari */ #div1 {-webkit-transition-timing-function: cubic-bezier(0,0,0.25,1);} #div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);} #div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);} #div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);} #div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);} div:hover { width:300px; } </style> </head> <body> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> <div id="div1" style="top:100px">linear</div> <div id="div2" style="top:150px">ease</div> <div id="div3" style="top:200px">ease-in</div> <div id="div4" style="top:250px">ease-out</div> <div id="div5" style="top:300px">ease-in-out</div> <p>Hover over the div elements above, to see the different transition effects.</p> </body> </html>
Result:
W3Schools.com - Try it yourself