how to repeat css circle animation after hover - css

Question

I want it to repeat the animation from where the hover has been 'released. So this is what my code looks like:
<section class="container">
<figure class="chart" data-percent="100">
<figcaption>HTML</figcaption>
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
</section>
This is the HTML I have got.
.outer {
fill: transparent;
stroke: #333;
stroke-width: 10;
stroke-dasharray: 534;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.chart[data-percent='100'] {
stroke-dashoffset: 0;
-webkit-animation: show100 2s;
animation-name: show100;
animation-duration: 2s;
}
.chart:hover .outer {
stroke-dashoffset: 534;
-webkit-animation: show0 2s;
animation-name: show0;
animation-duration: 2s;
}
#-webkit-keyframes show100 {
from {
stroke-dashoffset: 534;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes show100 {
from {
stroke-dashoffset: 534;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes show0 {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 534;
}
}
#keyframes show0 {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 534;
}
}
I am not sure if 'release' is the right word but I can't think of anything better right now.
So if you hover it, that animation will be reversed. But what I want to accomplish is that when you release the hover at 50%, the animation will play from 50% and when you release the hover at 20% that the animation will play from 20%. I haven't got really, I got stuck after the hover-reverse.
this is a live example of my working code:
https://jsfiddle.net/172dLc93/
Thanks

Answer 1

Use animation for the initial setup, but then use transitions so that it continues from where it left.
#import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
font-family: 'Lato';
}
.container {
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.chart {
position: relative;
display: inline-block;
color: #999;
font-size: 20px;
text-align: center;
}
.chart figcaption {
padding: 50px 25px;
width: 100px;
height: 50px;
border: 20px solid #f0f0f0;
border-radius: 100px;
line-height: 50px;
}
.chart svg {
position: absolute;
top: 0;
left: 0;
}
.outer {
fill: transparent;
stroke: #333;
stroke-width: 10;
stroke-dasharray: 534;
transition:stroke-dashoffset 2s;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.chart[data-percent='100'] {
stroke-dashoffset: 0
-webkit-animation: show100 2s;
animation-name: show100;
animation-duration: 2s;
}
.chart:hover .outer {
stroke-dashoffset: 534;
}
#-webkit-keyframes show100 {
from {
stroke-dashoffset: 534;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes show100 {
from {
stroke-dashoffset: 534;
}
to {
stroke-dashoffset: 0;
}
}
<section class="container">
<figure class="chart" data-percent="100">
<figcaption>HTML</figcaption>
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
</section>
Updated fiddle: https://jsfiddle.net/gaby/172dLc93/4/