Cacher is the code snippet organizer for pro developers

<!-- CSS Transitions basics
 
	Change propierty to one value to other over a given direction
	left to right - circle to square - black to green

	hover
    
    animation properties list  ( http://www.w3.org/TR/css3-transitions/)
-->

<div class="box">

</div>


<style>
/*  */

body {
	padding-top:50px;
}

.box {
	margin:auto;
	background-color: blue;
	transition-duration: 1s, .3s; /*  to transition back to original state */
}

.box:hover {/*  Change background-color */
	transition-property:background, border-radius;
	background-color: lighcoral;
	border-radius: 50%	
	transition-duration: 1s, .3s;  /* miliseconds .3s (point) - first background second border - we don't need to put the duration here if is in the box element*/
}

/*  with transition property all */

.box:hover {
	transition-property:all; /*  transition property all is default we don't need to include it */
	background-color: lighcoral;
	border-radius: 50%	
	transition-duration: 1s, .3s;  /* miliseconds .3s (point) - first background second border */
}

</style>

<!-- CSS Transitions easing and delaying

     http://matthewlein.com/ceaser/
-->

<div class="wrap">


<div class="box">

</div>
</div>


<style>
/*  */

body {
	padding-top:50px;
}

.wrap{
	background-color: #eee;
}

.box {
	margin:auto;
	background-color: blue;
	transition-property: margin, background; 
	transition-duration: 1s, .6s; 
	transition-timing-function: ease; 
	/*  default value - linear - ease end (faster at end) - ease out (slow at the end) */

	/* transition-timing-function: steps(4 , end); */

	/* transition-timing-function: cubic-bezier(x, y, x, y); 
	   Cubic Bezier P1x , P1y , P2x , P2y - range x (0-1) y (1 or less - )*/

	transition-timing-function: cubic-bezier(.5, -.5, .3, 1.3), ease; 
    transition-delay:0s, 1s;

    /* shorthand */

    transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, background .6s ease 1s;
    
     /* margin (duration - timing - delay */

     /* vendor prefixes */
     -webkit-transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, background .6s ease 1s;
     -moz-transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, background .6s ease 1s;
     -o-transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, background .6s ease 1s;
     transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, background .6s ease 1s;

}

.wrap:hover .box{
	background-color: lighcoral;
	margin-left: 75%		 
}

</style>