<div id="transitions">
    <div id="ease" class="transition-test"><p>ease</p></div>
    <div id="linear" class="transition-test"><p>linear</p></div>
    <div id="ease-in" class="transition-test"><p>ease-in</p></div>
    <div id="ease-out" class="transition-test"><p>ease-out</p></div>
    <div id="ease-in-out" class="transition-test"><p>ease-in-out</p></div>
</div>

#ease {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

#linear {
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-o-transition: all 1s linear;
	transition: all 1s linear;
}

#ease-in {
	-webkit-transition: all 1s ease-in;
	-moz-transition: all 1s ease-in;
	-o-transition: all 1s ease-in;
	transition: all 1s ease-in;
}

#ease-out {
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
}

#ease-in-out {
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

#transitions:hover .transition-test {
	margin-left:480px;
	-webkit-transform: rotate(360deg);
	background-color:#fef;
}