CSS3 Animations, Rotate CSS3 Animations with Examples

<!DOCTYPE html>
	<html>
		<head>
			<title>CSS3 Animations</title>
		</head>
		<body>
			
			<style type="text/css">
				.animation{
					width: 100px;
					height: 100px;
					background-color: red;
					border-radius:100px;  
					position: relative;
					-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
					-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
					-webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */
					animation-name: example;
					animation-duration: 4s;
					animation-iteration-count: 3;
				}

/* Safari 4.0 - 8.0 */
				@-webkit-keyframes example {
					0%   {background-color:red; left:0px; top:0px;}
					25%  {background-color:yellow; left:200px; top:0px;}
					50%  {background-color:blue; left:200px; top:200px;}
					75%  {background-color:green; left:0px; top:200px;}
					100% {background-color:red; left:0px; top:0px;}
				}

/* Standard syntax */
				@keyframes example {
					0%   {background-color:red; left:0px; top:0px;}
					25%  {background-color:yellow; left:200px; top:0px;}
					50%  {background-color:blue; left:200px; top:200px;}
					75%  {background-color:green; left:0px; top:200px;}
					100% {background-color:red; left:0px; top:0px;}
				}
			</style>
			  
			<div class='animation'></div>
			  
		</body>
	</html>

Output :

Topic : Animations