@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.945) 0s;}
#negative.box {border: 1px solid teal;transition: all 4s cubic-bezier(1,-0.53,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);}