CSS3 Transitions

transitions.css

.rotate {
	-webkit-transition-property: rotate;
	-webkit-transition-duration:2s;
	-webkit-transition-timing-function:ease;
	-webkit-transform:rotate(180deg);
	-moz-transition-property: rotate;
	-moz-transition-duration:2s;
	-moz-transition-timing-function:ease;
	-moz-transform:rotate(180deg);
	-ms-transition-property: rotate;
	-ms-transition-duration:2s;
	-ms-transition-timing-function:ease;
	-ms-transform:rotate(180deg);
	transition-property: rotate;
	transition-duration:2s;
	transition-timing-function:ease;
	transform:rotate(180deg);
}

.moveleft {
	-webkit-transition-property: left;
	-webkit-transition-duration:2s;
	-webkit-transition-timing-function:ease;
	-webkit-transition-delay: 2s;
	-moz-transition-property: left;
	-moz-transition-duration:2s;
	-moz-transition-timing-function:ease;
	-moz-transition-delay: 2s;
	-ms-transition-property: left;
	-ms-transition-duration:2s;
	-ms-transition-timing-function:ease;
	-ms-transition-delay: 2s;
	-o-transition-property: left;
	-o-transition-duration:2s;
	-o-transition-timing-function:ease;
	-o-transition-delay: 2s;
	transition-property: left;
	transition-duration:2s;
	transition-timing-function:ease;
	transition-delay: 2s;
	left: -50%;
}

.moveright {
	-webkit-transition-property: left;
	-webkit-transition-duration:2s;
	-webkit-transition-timing-function:ease;
	-webkit-transition-delay: 2s;
	-moz-transition-property: left;
	-moz-transition-duration:2s;
	-moz-transition-timing-function:ease;
	-moz-transition-delay: 2s;
	-ms-transition-property: left;
	-ms-transition-duration:2s;
	-ms-transition-timing-function:ease;
	-ms-transition-delay: 2s;
	-o-transition-property: left;
	-o-transition-duration:2s;
	-o-transition-timing-function:ease;
	-o-transition-delay: 2s;
	transition-property: left;
	transition-duration:2s;
	transition-timing-function:ease;
	transition-delay: 2s;
	left: 100%;
}