Бесконечное вращение элемента CSS3

Опубликовано автором

Посмотреть пример

CSS (style.css):

div {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 50px;
	height: 40px;
	background-color: #ff0000;
}

#element_block {
	-webkit-animation-name: spin;
	-webkit-animation-duration: 10000ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: spin;
	-moz-animation-duration: 10000ms;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-ms-animation-name: spin;
	-ms-animation-duration: 10000ms;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;

	animation-name: spin;
	animation-duration: 10000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@-ms-keyframes spin {
	from { -ms-transform: rotate(360deg); }
	to { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spin {
	from { -moz-transform: rotate(360deg); }
	to { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes spin {
	from { -webkit-transform: rotate(360deg); }
	to { -webkit-transform: rotate(0deg); }
}
@keyframes spin {
	from { transform:rotate(360deg); }
	to { transform:rotate(0deg); }
}

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Бесконечное вращение элемента CSS3</title>
<link href="style.css" type="text/css"  rel="stylesheet" />
</head>
<body>
<div id="element_block"></div>
</body>
</html>