SVG Rotating Dashed Circle Border on Hover - html

Question

I am trying to create an SVG Hover Animation Effect using CSS.
What I want to do attain is that when I hover on my Icon the solid circle container will rotate with a dashed container. See image below.
Check out what I have done so far: http://jsfiddle.net/uhkwLuph/3/
So far here's my code.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="icon">
<style type="text/css">
.st0
{
fill:none;
stroke:#F2F2F2;
stroke-width:4;
stroke-miterlimit:10;
}
#icon .st0{
-webkit-transition: .5s;
}
#icon:hover .st0{
fill: #ffffff;
stroke: #1f8a4c;
cursor: pointer;
}
</style>
<g id="container">
<circle class="st0" cx="101" cy="99" r="89.333"/>
</g>
<g id="icon-details">
<path class="st0" d="M146.899,134.202c3.856,4.702,2.772,11.963-2.418,16.218l0,0c-5.192,4.258-12.523,3.896-16.38-0.806
l-30.004-36.594c-3.855-4.701-2.772-11.964,2.418-16.22l0,0c5.19-4.256,12.523-3.895,16.377,0.808L146.899,134.202z"/>
<circle class="st0" cx="77.843" cy="72.434" r="33.331"/>
<circle class="st0" cx="77.844" cy="72.434" r="22.343"/>
</g>
</svg>
I understand that it can be attain with stroke-dasharray and stroke-offset + #Keyframes (CSS) but can anyone point me how we can implement it?
Here's the JSFIDDLE:

Answer 1

Fiddle: Click
Now you just have to play with the dashoffset/dasharray values.
CSS:
body { background: #27ae60; }
#container{
}
#container:hover circle{
animation: dash 2s linear forwards;
-webkit-animation: dash 2s linear forwards;
}
#keyframes dash {
0%{ stroke-dashoffset:0;
stroke-dasharray:0;}
100% {
stroke-dashoffset:10;
stroke-dasharray:180;
}
}
#-webkit-keyframes dash {
0%{ stroke-dashoffset:0;
stroke-dasharray:0;}
100% {
stroke-dashoffset:10;
stroke-dasharray:180;
}
}

Answer 2

UPDATE
:root { background: #27ae60; transition: background .3s ease}
[class=loop]{
position:relative;
margin: 240px auto
}
[class=loop], [class=circle]{
width: 240px;
height: 240px
}
[class=loop]:before, [class=loop]:after{
content: '';
z-index: 1
}
[class=loop]:before, [class=loop]:after,[class=circle]{
position: absolute;
}
[class=loop]:after,[class=circle]{
border-radius: 50%
}
[class=loop]:before{
width: 80px;
height: 20px;
border-radius: 10px;
border: 4px solid green;
transform: rotateZ(50deg);
top: 160px;
left: 114px
}
[class=loop]:after{
top: 32px;
left: 32px;
width: 100px;
height: 100px;
border: 10px solid transparent;
box-shadow: inset 0 0 0 4px green,0 0 0 4px green
}
[class=circle]{
border: 4px dashed green;
top: 0px;
left: 0px;
background: white;
z-index: 0;
background-clip: content-box
}
[class=loop]:hover [class=circle]{
-webkit-animation: spin 1s infinite linear;
-moz-animation: spin 1s infinite linear;
animation: spin 1s infinite linear
}
#-webkit-keyframes spin {
to { transform: rotate(360deg); }
}
#-moz-keyframes spin {
to { transform: rotate(360deg); }
}
#keyframes spin {
to { transform: rotate(360deg); }
}
<div class=loop>
<div class=circle></div>
</div>
Single element solution would be
:root { background: #27ae60; transition: background .3s ease}
:root:hover { background: red }
div{
width: 80px;
height: 20px;
border-radius: 10px;
border: 4px solid white;
transform: rotateZ(45deg);
margin: 230px auto;
position: relative
}
div:before,div:after{
content: '';
position: absolute;
border-radius: 50%
}
div:before{
width: 100px;
height: 100px;
border: 10px solid transparent;
top: -52px;
left: -124px;
box-shadow: inset 0 0 0 4px white,0 0 0 4px white
}
div:after{
width: 250px;
height: 250px;
border: 4px dashed white;
top: -124px;
left: -154px
}
div:hover:after{
-webkit-animation: spin 1s infinite linear;
-moz-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
}
#-webkit-keyframes spin {
to { transform: rotate(360deg); }
}
#-moz-keyframes spin {
to { transform: rotate(360deg); }
}
#keyframes spin {
to { transform: rotate(360deg); }
}
<div/>