W3schools CSS3 Animations, CSS3 Animations with Examples

<!DOCTYPE html>
	<html>
		<head>
			<title>CSS3 Animations</title>
		</head>
		<body>
			
			<style type="text/css">
				.animation-front-back{
					width: 100px;
					height: 100px;
					background-color: red;
					position: relative;
					border-radius:100px;  
					/* Safari 4.0 - 8.0 */
					-webkit-animation-name: example;
					-webkit-animation-duration: 5s;
					-webkit-animation-timing-function: linear;
					-webkit-animation-delay: 2s;
					-webkit-animation-iteration-count: infinite;
					-webkit-animation-direction: alternate;
					/* Standard syntax */
					animation-name: example;
					animation-duration: 5s;
					animation-timing-function: linear;
					animation-delay: 2s;
					animation-iteration-count: infinite;
					animation-direction: alternate;
				}

/* 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-front-back"></div>
			  
		</body>
	</html>

Output :

Topic : Animations