Animate Circular div in circular path
by Mohan[ Edit ] 2014-01-11 18:48:34
Hai
Here is a sample code for animating a circular div along circular path. It is done by pure css3
<html>
<head>
<title>Rotate Div</title>
<style>
.dot{
position:absolute;
top:400;
left:400;
width:50px;
height:50px;
background:red;
border-radius:50%;
}
.center{
width:200px;
height:200px;
position:absolute;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:orbit;
-webkit-animation-duration:5s;
top:450px;
left:450px;
}
@-webkit-keyframes orbit {
from { -webkit-transform:rotate(0deg) }
to { -webkit-transform:rotate(360deg) }
}
</style>
</head>
<body>
<div class="center">
<div class="dot"></div>
</div>
</body>
</html>
