If you are a Google plus user, I am sure you will fall in love with Google plus circle animation. Google plus given an awesome user experience, specially circle’s animations. When I saw the rotation animation first time in Google plus, I was so excited to create my own rotation animation like Google plus. I have been working in these days to develop circle rotation animation effect with Jquery and CSS3.

google-circles-animation

I have tried circle rotation animation effect with Jquery and CSS3. Just few lines of code applying CSS styles using jQuery methods like .addClass() and .animation().

Click here to watch live demo T1

Click here to watch live demo T2

Circle
CSS3 circle diameter 50px

.circle
{
border-radius: 50px; // Chrome & IE9
-moz-border-radius: 50px; // Firefox
-webkit-border-radius: 50px; // Safari
height:100px;
width:100px;
background:#dedede;
}

Rotation
CSS3 rotating 0 – 360 degrees

@-webkit-keyframes rotateThis
{
from {-webkit-transform:scale(1) rotate(0deg);}
to {-webkit-transform:scale(1) rotate(360deg);}
}
.circle-label-rotate
{
-webkit-animation-name: rotateThis;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}

Square
Contains CSS code.

.square
{
height:100px;
width:500px;
border:dashed 1px #000;
margin-top:10px;
}

Click here to view Javascript Code

 


 

Please post your queries and comments !