@charset "utf-8";

#timings_container {border: 1px solid #aaa; height:530px; width:530px; margin: 0 auto; padding: 10px; position:relative;}

#ease.box {border:1px solid red; transition:all 4s ease 0s;}

#ease-in.box {border:1px solid green; transition:all 4s ease-in 0s; }

#ease-out.box {border:1px solid blue; transition:all 4s ease-out 0s;}

#ease-in-out.box {border:1px solid purple; transition:all 4s ease-in-out 0s;}

#linear.box {border:1px solid yellow; transition:all 4s linear 0s;}

#custom.box {border:1px solid orange; transition:all 4s cubic-bezier(1,0.835,0,0,0.945) 0s;}

#negative.box {border:1px solid teal; transition:all 4s cubic-bezier(1,-0.53,0.405,1.425) 0s;}

.box {font-size:12px; height:60px; width:60px; margin-bottom:10px; position:relative; background-color: #626262; color:white;}

.box p {text-align:center; padding:4px;}

#timings_container:hover .box {background-color:white; color:black; border-radius:30px; margin-left:420px; transform:rotate(720deg);}