SVG hover animation problème glitch

Question

J'essaie d'activer cette animation sur hover qui fonctionne! mais c'est glitchy chaque fois que la souris est déplacée, elle tire à nouveau. Y a-t-il une solution à ce problème? existe-t-il aussi un moyen de forcer l'animation à se terminer après le passage du clavier?

<svg id="squid" version="1.1" 
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" 
    x="0px" y="0px" width="180px" height="192.8px" viewBox="0 0 130 225" 
    xml:space="preserve" preserveAspectRatio="xMidyMax meet"> 
<defs> 
</defs> 
<g class="squid"> 
<path id="left-arm" class="left-arm" d="M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9"/> 
<path id="right-arm" class="right-arm" d="M122,20.8c0,0-21.3,0-21.3,21.2c0,21.2,20.8,18.4,20.8,41.4c0,22.6-36.7,34.4-52.8-8.9"/> 
<path id="lightning" class="lightning" d="M65.2,43.7L67.7,56l3.1,15.9L63.4,56L52.9,33.2l9.9-0.4l-5-27.6l17.3,38L65.2,43.7z"/> 
<path id="left-mid-arm" class="left-mid-arm" d="M58.5,99.6c-31.1,25.5-50,28.7-50,50.8c0,15.8,10.2,22.9,16,26.6"/> 
<path id="right-mid-arm" class="right-mid-arm" d="M69.7,99.6c31.1,25.5,50,28.7,50,50.8c0,15.8-10.2,22.9-16,26.6"/> 
    <g id="right-limb"> 
     <path id="right-leg" class="right-leg" d="M63.2,107.6c0,0,6.3-0.1,10.3,7.6c1.6,3.1,2.4,6.4,2.3,10.2c-0.1,2.7-0.6,6.1-0.6,6.1"/> 
     <path id="right-foot" class="right-foot" d="M51.5,156.9c-2.3,3-3.7,6.7-3.7,11.9c0,5.1,1.4,8.8,3.1,11.5"/> 
    </g> 
<path id="left-leg" class="left-leg" d="M63.8,107.6c0,0-14.3,0.3-11.6,20.6c2.8,20.8,27.9,19,27.9,40.6c0,14.6-11.2,18-11.2,18"/> 
<g class="body"> 
    <path id="body" d="M84.7,62.6c0.1-0.1,5.1-1.5,5-5.1V5c0-2.8-2.2-5-5-5h-42c-2.8,0-5,2.2-5,5v52.4c0,2.4,1.7,4.4,3.9,4.9 
    c0.2,0,1.1,0.2,1.2,0.3c2,0.8,3.5,2.7,3.5,5c0,2.2-1.4,4.1-3.3,4.9c-0.1,0.1-5.4,1.2-5.3,5.3v0.4c0,2.8,2.2,5,5,5h1.5 
    c2.2,0,7.3,2.2,8.6,4.2c-1.1,1.9-1.7,4-1.7,6.4c0,6.9,5.6,12.5,12.5,12.5S76,100.6,76,93.7c0-2.2-0.5-4.2-1.5-6 
    c3.1-2.2,7.6-4.5,8.8-4.5h1.4c2.8,0,5-2.2,5-5v-0.4c0-4.5-5.1-5.2-5.2-5.3c-2-0.8-3.4-2.7-3.4-5C81.1,65.3,82.6,63.3,84.7,62.6z"/> 
</g> 

    <path id="lightning" class="lightning" d="M65.2,43.7L67.7,56l3.1,15.9L63.4,56L52.9,33.2l9.9-0.4l-5-27.6l17.3,38L65.2,43.7z"/> 

    <animate 
      xlink:href="#left-arm" 
      attributeName="d" 
      dur="1s" 
      begin="squid.mouseover" 
      end="squid.mouseout" 
      repeatCount="indefinite" 
      values=" 
       M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9; 

        M20,50.1c0,0,2.8-5.8-6.5,13.3c-12.6,25.9-40.3,64-15,78c20.2,11.2,41-11.5,57.1-54.9; 

M-2,140.2c0,0,0,0-4.2,4.4c-5.2,5.5-21.2,30.8-0.2,40.5c27.9,12.8,46.2-59.2,62.3-102.5; 

M6,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3; 

M10,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3; 

M6,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3; 

M-2,140.2c0,0,0,0-4.2,4.4c-5.2,5.5-21.2,30.8-0.2,40.5c27.9,12.8,46.2-59.2,62.3-102.5; 

M20,50.1c0,0,2.8-5.8-6.5,13.3c-12.6,25.9-40.3,64-15,78c20.2,11.2,41-11.5,57.1-54.9; 

         M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9; 


      Z;"/> 

    <animate 
      xlink:href="#left-mid-arm" 
      attributeName="d" 
      dur="1s" 
      begin="squid.mouseover" 
      end="squid.mouseout" 
      repeatCount="indefinite" 
      values=" 
       M58.5,99.6c-31.1,25.5-50,28.7-50,50.8c0,15.8,10.2,22.9,16,26.6; 

        M58.6,98.4c-21.2,26-37.6,7-50,25.4c-9.7,14.5,10.2,22.9,16,26.6; 

M61.5,106.4c-31.1,25.5-33,56.3-33,78.4c0,15.8,0,5.1,0,15.8; 

             M64.5,106.4c-31.1,25.5-33,56.3-33,78.4c0,15.8,0,5.1,0,15.8; 

M61.5,106.4c-31.1,25.5-33,56.3-33,78.4c0,15.8,0,5.1,0,15.8;      
        M58.6,98.4c-21.2,26-37.6,7-50,25.4c-9.7,14.5,10.2,22.9,16,26.6; 

        M58.5,99.6c-31.1,25.5-50,28.7-50,50.8c0,15.8,10.2,22.9,16,26.6; 


      Z;"/> 

    <animate 
      xlink:href="#right-mid-arm" 
      attributeName="d" 
      dur="1s" 
      begin="squid.mouseover" 
      end="squid.mouseout" 
      repeatCount="indefinite" 
      values=" 
       M69.7,99.6c31.1,25.5,50,28.7,50,50.8c0,15.8-10.2,22.9-16,26.6; 

M69.7,98.4c21.2,26,37.6,7,50,25.4c9.7,14.5-10.2,22.9-16,26.6; 

M68,106.4c31.1,25.5,33,56.3,33,78.4c0,15.8,0,5.1,0,15.8; 

M64,106.4c31.1,25.5,33,56.3,33,78.4c0,15.8,0,5.1,0,15.8; 

M68,106.4c31.1,25.5,33,56.3,33,78.4c0,15.8,0,5.1,0,15.8; 
        M69.7,98.4c21.2,26,37.6,7,50,25.4c9.7,14.5-10.2,22.9-16,26.6; 

M69.7,99.6c31.1,25.5,50,28.7,50,50.8c0,15.8-10.2,22.9-16,26.6; 


      Z;"/> 

    <animate 
      xlink:href="#right-arm" 
      attributeName="d" 
      dur="1s" 
      begin="squid.mouseover" 
      end="squid.mouseout" 
      repeatCount="indefinite" 
      values=" 
       M122,20.8c0,0-21.3,0-21.3,21.2c0,21.2,20.8,18.4,20.8,41.4c0,22.6-36.7,34.4-52.8-8.9; 

        M105.9,50.4c0,0-2.3-3.1,10.4,14c12.7,17,44.3,62.7,22,78.3c-22.7,16-50.5-11.9-66.6-55.2; 

M128,140.2c0,0,0,0,4.2,4.4c5.2,5.5,21.2,30.8,0.2,40.5c-27.9,12.8-46.2-59.2-62.3-102.5;      
        M124,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9-40.2-75.2-56.3-118.5; 

M120,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9-40.2-75.2-56.3-118.5; 

        M124,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9-40.2-75.2-56.3-118.5; 
        M128,140.2c0,0,0,0,4.2,4.4c5.2,5.5,21.2,30.8,0.2,40.5c-27.9,12.8-46.2-59.2-62.3-102.5; 

        M105.9,50.4c0,0-2.3-3.1,10.4,14c12.7,17,44.3,62.7,22,78.3c-22.7,16-50.5-11.9-66.6-55.2; 


        M122,20.8c0,0-21.3,0-21.3,21.2c0,21.2,20.8,18.4,20.8,41.4c0,22.6-36.7,34.4-52.8-8.9; 


      Z;"/> 

    <animate 
      xlink:href="#right-leg" 
      attributeName="d" 
      dur="1s" 
      begin="squid.mouseover" 
      end="squid.mouseout" 
      repeatCount="indefinite" 
      values=" 
       M68.5,108.9c4,2.5,8.9,8.6,7.2,21.3c-0.1,0.4-0.1,0.8-0.2,1.2; 

M68.5,105.9c4,2.5,7.2,3.5,7.2,16.3c0,2.2-0.4,4-1.2,5.8; 

        M68.5,105.7c4,2.5,7.2,8.5,7.2,21.3c0,2-0.1,3.7-0.4,5.1; 

M68.5,105.9c4,2.5,7.2,3.5,7.2,16.3c0,2.2-0.4,4-1.2,5.8; 


M68.5,108.9c4,2.5,8.9,8.6,7.2,21.3c-0.1,0.4-0.1,0.8-0.2,1.2; 


      Z;"/> 

     <animate 
      xlink:href="#right-foot" 
      attributeName="d" 
      dur="1s" 
      begin="squid.mouseover" 
      end="squid.mouseout" 
      repeatCount="indefinite" 
      values=" 
M51.5,156.9c-2.3,3-3.7,6.7-3.7,11.9c0,5.1,1.4,8.8,3.1,11.5; 

        M48,156.9c0,5.9,0,3,0,4.9c0,3.9,0,2.8,0,3.9; 

        M52.5,156.9c0,5.9,0,3,0,4.9c0,3.9,0,2.8,0,3.9; 

        M48,156.9c0,5.9,0,3,0,4.9c0,3.9,0,2.8,0,3.9; 

        M51.5,156.9c-2.3,3-3.7,6.7-3.7,11.9c0,5.1,1.4,8.8,3.1,11.5; 
      Z;"/> 

     <animate 
      xlink:href="#left-leg" 
      attributeName="d" 
      dur="1s" 
      begin="squid.mouseover" 
      end="squid.mouseout" 
      repeatCount="indefinite" 
      values=" 

M63.8,107.6c0,0-14.3,0.3-11.6,20.6c2.8,20.8,27.9,19,27.9,40.6c0,14.6-11.2,18-11.2,18; 

M63.9,114.4c0,0,3-0.6,10.2,18.5c6,16.1,6,30.2,6,40.2c0,4,0,10.3,0,10.3; 

M60.9,114.4c0,0,3-0.6,10.2,18.5c6,16.1,6,30.2,6,40.2c0,4,0,10.3,0,10.3; 

M63.9,114.4c0,0,3-0.6,10.2,18.5c6,16.1,6,30.2,6,40.2c0,4,0,10.3,0,10.3; 


M63.8,107.6c0,0-14.3,0.3-11.6,20.6c2.8,20.8,27.9,19,27.9,40.6c0,14.6-11.2,18-11.2,18; 


      Z;"/> 


      <animate 
      xlink:href="#right-leg" 
      attributeName="d" 
      dur="1s" 
      begin="squid.mouseover" 
      end="squid.mouseout" 
      repeatCount="indefinite" 
      values=" 

M63.2,107.6c0,0,6.3-0.1,10.3,7.6c1.6,3.1,2.4,6.4,2.3,10.2c-0.1,2.7-0.6,6.1-0.6,6.1;      

M68.2,107.6c0,0,14.3,0.3,11.6,20.6c-2.8,20.8-27.9,19-27.9,40.6c0,14.6,11.2,18,11.2,18; 

M64.7,114.4c0,0-3-0.6-10.2,18.5c-6,16.1-6,30.2-6,40.2c0,4,0,10.3,0,10.3; 

M68.7,114.4c0,0-3-0.6-10.2,18.5c-6,16.1-6,30.2-6,40.2c0,4,0,10.3,0,10.3; 

M64.7,114.4c0,0-3-0.6-10.2,18.5c-6,16.1-6,30.2-6,40.2c0,4,0,10.3,0,10.3; 


M68.2,107.6c0,0,14.3,0.3,11.6,20.6c-2.8,20.8-27.9,19-27.9,40.6c0,14.6,11.2,18,11.2,18; 
        M63.2,107.6c0,0,6.3-0.1,10.3,7.6c1.6,3.1,2.4,6.4,2.3,10.2c-0.1,2.7-0.6,6.1-0.6,6.1; 

      Z;"/> 


    </g> 
</svg> 

Voici mon stylo - survolez-le par exemple.

http://codepen.io/alcoven/pen/mOrYBd?editors=1100

Answer 1

Mouseover se déclenche à chaque fois que vous déplacez la souris. Essayez plutôt mouseenter.

begin="squid.mouseenter"