Animate Circular div in circular path

by Mohan 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>

Tagged in:

477
like
0
dislike
0
mail
flag

You must LOGIN to add comments