CSS3 | Transitions

In order to do transitions in CSS this is the code we need to add to the root selector. For example, if we want to make the logo rotate on hover, we would add this to the ‘logo{} selector.

	/* css3 transition */
	-webkit-transition:-webkit-transform 1s;
	-o-transition-property:-o-transform;
	-o-transition-duration:1s;
	-moz-transition-property:-o-transform;
	-moz-transition-duration:1s;
	transition-property:transform;
	transition-duration:1s;

This code only enables the ability for transitions on these properties, so we must specify what we want on the selector we need. 

#logo:hover
{
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
}