Social Networks

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.


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

CSS3 circle diameter 50px

border-radius: 50px; // Chrome & IE9
-moz-border-radius: 50px; // Firefox
-webkit-border-radius: 50px; // Safari

CSS3 rotating 0 – 360 degrees

@-webkit-keyframes rotateThis
from {-webkit-transform:scale(1) rotate(0deg);}
to {-webkit-transform:scale(1) rotate(360deg);}
-webkit-animation-name: rotateThis;

Contains CSS code.

border:dashed 1px #000;

Click here to view Javascript Code



Please post your queries and comments !

  1. 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 *

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>