CSS3 Animation example 5

CSS3 Examples

14. CSS3 Animation example 5.


<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style>
@keyframes anim2
{
	from{ }
	to { width:500px;height:500px; top:30px; left:100px;transform:rotate(360deg);}
}
@-webkit-keyframes anim2
{
	
	from{ }
	to { width:500px;height:500px; top:30px; left:100px;-webkit-transform:rotate(360deg);}
}
#pic{
	position:relative;
	top:30px;
	left:300px;
}
#pic:hover{
	animation:anim2 5s;
	-webkit-animation:anim2 5s;
}
</style>
</head>

<body>

<img src="images/anjelina.jpg" width="100" id="pic">

</body>
</html>

Output :(Mouse over the image)