Making a circle with dotted border in css and animating on hover

Question

I'm trying to animate a css circle. When the user hovers it, the border of the circle should become a dotted line and it should animate like a spinning wheel. I can make it spin for a given time, but I couldn't find a way to animate it until the mouse pointer hovers on it and then stop the animation when the mouse pointer is taken out of the circle and make a dotted border.

html

<div>
</div>

css

div {
    background: red;
    border: 5px solid green;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    transition: all 5s ease-in-out;
}

div:hover {
     transform:rotate(180deg);
     border: 5px dotted blue;
}

jsfiddle -> http://jsfiddle.net/uYBKQ/1/

I assume you're using Firefox http://stackoverflow.com/questions/3718215/css3-rounded-and-dotted-borders — Prinzhorn, Jun 21 '13 at 17:17
@Prinzhorn The syntax is correct for Firefox, but it looks like it won't work on the rounded portion of the border (in firefox). — Tom Pietrosanti, Jun 21 '13 at 17:23
fwiw, there is an open bug for this: https://bugzilla.mozilla.org/show_bug.cgi?id=382721 — Tom Pietrosanti, Jun 21 '13 at 17:25

leoMestizo · Accepted Answer · 2013-06-21T17:25:00.547

4

You need CSS Animations.

In your HTML code, put the follow class:

<div class="rotate">
 <!-- The content -->
</div>

And in your CSS file, add these rules (this example is only for webkit):

div:hover {
     -webkit-animation: rotate 2s linear infinite;
}

@-webkit-keyframes rotate {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(180deg);
    }
}

Here's a DEMO

Cheers, Leo

If you want to works in Firefox, just add the respective vendor prefixes.

edited Jun 21 '13 at 17:25

answered Jun 21 '13 at 17:19

leoMestizo

1,469
9
15

2

Keep in mind this will only word in modern browsers, you might want to check out http://modernizr.com/. Modernizr checks and replaces non-supported css3 features with javascript. – Joe_Maker Jun 21 '13 at 17:58
I could not have said it better. Thanks @Joe_Maker. – leoMestizo Jun 21 '13 at 18:03

NullHappens · Answer 2 · 2013-06-21T17:35:28.917

I forked your fiddle here: http://jsfiddle.net/vHRat/3/

Here is the updated CSS:

div {
    background: red;
    border: 5px solid green;
    width: 200px;
    height: 200px;
    border-radius: 0%;
}

div:hover {
    border: dotted 5px blue;
    animation: hover 5s;
    -webkit-animation: hover 5s; /* Safari and Chrome */
}
@keyframes hover
{
    from {}
    to {
        transform:rotate(360deg);
        -ms-transform:rotate(360deg); /* IE 9 */
        -webkit-transform:rotate(360deg); /* Safari and Chrome */
    }
}
@-webkit-keyframes hover /* Safari and Chrome */
{
    from {}
        to {
            transform:rotate(360deg);
            -ms-transform:rotate(360deg); /* IE 9 */
            -webkit-transform:rotate(360deg); /* Safari and Chrome */
        }
}

Also for what its worth, if you change the border-radius to 0, you can clearly see the rotation. The border appears as solid and the circle appears static due to the rotation.

Making a circle with dotted border in css and animating on hover

2 Answers2

Linked