how to make dashed border line move in clockwise when you are hovering

Question

I have dashed border around div element :

 .dash_border{
        border: dashed;
        stroke: 2px;
        margin:20px;
    }

I want to move the dashed lines clockwise when my pointer is on top of the div element and stop when I get out out of that element. How can I do it ?

And the animation which is displayed stops or keeps continuing when I hover. How can I stop animation when I don't hover on that div element? — jason, Oct 15 '16 at 10:13

score 1 · Answer 1 · edited May 23 '17 at 10:27

div {
    background: white;
    border: 2px solid black;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

div:hover {
     -webkit-animation: rotate 2s linear infinite;
     border: 2px dashed blue;
}

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

   <div class="rotate"></div>

This is based on this answer: Making a circle with dotted border in css and animating on hover.

http://jsfiddle.net/MadalinaTn/j4ys9x2L/

how to make dashed border line move in clockwise when you are hovering

1 Answers1