CODEWITHSUNDEEP
htmlcsscss-transitions
It worked yesterday.
It worked yesterday.

Reputation: 4617

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

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/

Upvotes: 2

Views: 11396

Answers (2)

NullHappens
NullHappens

Reputation: 425

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.

Upvotes: 4

leoMestizo
leoMestizo

Reputation: 1499

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.

Upvotes: 4

Related Questions