CSS how to revert SVG animation on mouseout from current frame - css

Question

I'm doing some button animation with SVG and can't make it to work exactly I want. I tried find same case but no luck. So I end up here, because I spend too much time on this already. Any help would be much appreciated.
Here is the code: http://jsfiddle.net/wq4djg9z/2/
It works fine, but with one flaw. It's always starts animation from fixed value.
#button-border {
stroke-dasharray: 150;
stroke-dashoffset: 150;
stroke-width: 4px;
-webkit-animation: dash-back 1.0s linear;
fill: none;
pointer-events: all;
}
#button-border:hover {
-webkit-animation: dash 1.0s linear forwards;
pointer-events: all;
}
#-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes dash-back {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 150;
}
}
Is there a way to start animation from current animation frame when mouse out the button to smooth animation?

Answer 1

What about using transitions instead of animations to do the reverse part ?
#button-border {
stroke-dasharray: 150;
stroke-dashoffset: 150;
stroke-width: 4px;
-webkit-animation: dash-back 1.0s linear;
animation: dash-back 1.0s linear;
fill: none;
pointer-events: all;
transition: stroke-dashoffset 1s linear;
-webkit-transition: stroke-dashoffset 1s linear;
}
#button-border:hover {
stroke-dashoffset: 0;
pointer-events: all;
}
#-webkit-keyframes dash-back {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 150;
}
}
#keyframes dash-back {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 150;
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100.00000" height="50.00000" id="svg1" version="1.1" viewBox="0 0 100 50" enable-background="new 0 0 100 50" xml:space="preserve">
<style type="text/css">
<![CDATA[]]>
</style>
<g id="button-border">
<path class="path" style="fill:none;stroke:#000000;stroke-opacity:1" d="m 100,50.0 0,-50.00000 -100,00.00000" id="path2983" />
<path class="path" style="fill:none;stroke:#000000;stroke-opacity:1" d="m 0,0 0,50 100,0" id="path2984" />
<text x="30" y="30" font-family="Verdana" font-size="15" fill="blue">Hello</text>
</g>
</svg>