Google Plus Circle Animation With Jquery and CSS3 in Your Website

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 !

Please donate!


Comments

  1. bing says

    Hello, i think that i saw you visited my site so i came to return the
    favor?.I’m trying to find issues to enhance my website!I assume its adequate to use some of your ideas!!

  2. Darmstadt Hessen Herrngarten says

    I am really impressed along with your writing talents as neatly as with the structure to your weblog.
    Is this a paid theme or did you customize it your self?
    Either way stay up the excellent quality writing, it’s rare to look a nice blog like this one these days..

Leave a Reply

Your email address will not be published. Required fields are marked *