css animation - 1(20150910)

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 Animation</title>
<style>
	body {
		animation-name: example;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}
	img { border-radius:50%; }
	img:hover {
		animation-name: example2;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}
	@keyframes example {
					from { background-color:red; }
					to { background-color:blue; }
	}
	@keyframes example2 {
					0% { transform: rotate(0deg); }
					50% { width:500px; height:500px; }
					100% { transform: rotate(360deg); }
	}
</style>
</head>
<body>
	<img src="http://lorempixel.com/300/300" width="300" height="300">
</body>
</html>