CSS如何从当前帧恢复鼠标悬停的SVG动画

Question

我正在使用 SVG 制作一些按钮动画，但无法使其完全按照我的意愿工作。我尝试找到相同的案例，但没有运气。所以我最终到了这里，因为我已经在这上面花费了太多时间。任何帮助将非常感激。 这是代码：http://jsfiddle.net/wq4djg9z/2/ 它工作正常，但有一个缺陷。它总是从固定值开始动画。

#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;
    }
}

当鼠标移出按钮以平滑动画时，有没有办法从当前动画帧开始动画？

Answer 1

使用transitions 而不是animations 来做相反的部分怎么样？

#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>