小编Nik*_*hes的帖子

我制作了以下菜单图标 CSS 动画，当我点击它时会触发它。当我使用 jQuery 第二次单击它时，我想让它反向动画。

#path1 {
  stroke-dasharray: 33px;
  stroke-dashoffset: 33px;
  animation: line 1.5s linear forwards;
  animation-play-state: paused;
}

@keyframes line {
  100% {
    stroke-dashoffset: -15.5;
  }
}

#halfLineLeft {
  transform-origin: 1% 50%;
  animation: shrinkleft 1s linear forwards;
  animation-play-state: paused;
}

 #halfLineRight {
  transform-origin: 100% 1%;
  animation: shrinkleft 1s linear forwards;
  animation-play-state: paused;
}

@keyframes shrinkleft {
  100% {
    transform: scale(0,1);
  }
}
svg {
  transform: translate(350px, 200px);
}

这是我到目前为止的 jQuery ......

$("svg").click(
  function(){
     $("#path1, #halfLineLeft, #halfLineRight").css("animation-play-state", "running");
  }
 ); …