暂停css动画在悬停，并继续从点。

Question

我试图在悬停时添加svg路径动画，并在mouseOut上反转动画。

如果mouseOut在mouseOn动画完成之前暂停了动画，并将其从关键帧中反转，我将如何暂停动画？

另外，如果动画是反转的，而你在动画的中间悬停，我希望倒转的动画停止，并从那个点开始播放。

请以Fiddle为例

我还使用jquery向元素添加了吸引符。我是否只需要使用css来完成这个任务？

$(document).ready(function() {
  $('svg').hover(function() {
    /* Stuff to do when the mouse enters the element */
    $(this).find('circle').fadeIn(100);
    $(this).find('circle').attr("class", "social-circle movingCirc");
    console.log('on');
  }, function() {
    /* Stuff to do when the mouse leaves the element */
    $(this).find('circle').attr("class", "social-circle removingCirc");
    $(this).find('circle').delay(1900).fadeOut(100);
    console.log("hover off");
  });
});

谢谢你的帮忙

Answer 1

我不知道stroke-dashoffset动画“停止和逆转”是否可以用纯CSS动画完成，但是这里有一个你的小提琴叉，它有一个使用jquery动画的解决方案。

以下是javascript：

$(function() {
  var $svg = $('svg');
  var $circle = $('circle', $svg);

  $svg.hover(function() {
    /* Stuff to do when the mouse enters the element */
    $circle
      .stop()
      .animate({
        'stroke-dashoffset': 0
      }, 2000);
  }, function() {
    /* Stuff to do when the mouse leaves the element */
    $circle
      .stop()
      .animate({
        'stroke-dashoffset': 900
      }, 2000);
  });
});