CSS3 Animations - To: CSS3 - Information and samples

Code used in this page

.animation-container {
	height: 60px;
	padding: 10px;
	/* Shorthand syntax */
	-webkit-animation: movearound 4s ease 3 normal;
}

@-webkit-keyframes movearound {
	0% {
		width: 200px;
		background: #f00;
		opacity: 0.5;
		-webkit-transform: scale(0.5) rotate(15deg);
	}
	30% {
		width: 300px;
		background: #f00;
		opacity: 1;
		-webkit-transform: scale(1.3) rotate(15deg);
	}
	60% {
		width: 100px;
		background: #00f;
		opacity: 0.3;
		-webkit-transform: scale(0.3) rotate(15deg);
	}			
	100% {
		width: 400px;
		background: #ffffa2;
		opacity: 0.5;
		-webkit-transform: scale(1) rotate(0deg);
	}
}