SVG Path animation shifting axis - animation

Question

I'm an SVG noob and am trying to animate this Squid. I can't understand why the right arm is keeps anchoring itself to the top left of the viewbox as well as anything that I animate. I've created a css animation property to try to counteract it but I feel like there is an underlying issue or a better way to do this/fix this.
I've changed the color of the right arm to red. I want it to do what the left arm is doing.
Hopefully you guys can help.
Here is my SVG Code
<svg 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="220px" height="192.8px" viewBox="0 0 80 192.8" style="enable-background:new 0 0 128 192.8;"
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"/>
<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"/>
</g>
<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>
<g>
<path id="right-leg" class="right-leg" d="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"/>
<path id="right-foot" class="right-foot" d="M51.6,156.8c-2.3,3-3.8,6.8-3.8,12.1c0,5.1,1.4,8.8,3.1,11.5"/>
</g>
</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="M85.6,91.1c-0.9-0.7-1.4-1.4-1.7-1.9c-1.5-1.9-2.7-5.9-0.5-6h1.4c2.8,0,5-2.2,5-5v-0.4c0-4.5-5.1-5.2-5.2-5.3
c-2-0.8-3.4-2.7-3.4-5c0-2.3,1.5-4.3,3.5-5c0.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.4
c0,2.4,1.7,4.4,3.9,4.9c0.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.4
c0,2.8,2.2,5,5,5h1.5c2.3,0,1.6,4.4,0,6c-0.8,0.8-1.7,2.1-3.6,3.5l23.4,8.9L85.6,91.1z M65,43.7L67.4,56l3.1,15.9L63.2,56
L52.7,33.2l9.9-0.4l-5-27.6l17.3,38L65,43.7z"/>
</g>
<animate
xlink:href="#left-arm"
attributeName="d"
dur="2s"
begin="0s"
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;
M37.9,6.8c0,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;
M20.9,63.7c0,0,0,0-4.2,4.4c-5.2,5.5-21.2,30.8-0.2,40.5C44.5,121.4,62.7,49.3,78.9,6;
M37.9,6.8c0,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="#right-arm"
attributeName="d"
dur="2s"
begin="0s"
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;
M40.3,6.2c0,0-2.3-3.1,10.4,14c12.7,17,44.3,62.7,22,78.3C49.9,114.5,22.2,86.7,6,43.4;
M64,63.7c0,0,0,0,4.2,4.4c5.2,5.5,21.2,30.8,0.2,40.5C40.4,121.4,22.2,49.3,6,6;
M40.3,6.2c0,0-2.3-3.1,10.4,14c12.7,17,44.3,62.7,22,78.3C49.9,114.5,22.2,86.7,6,43.4;
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;"/>
</g>
</svg>
CSS
.left-arm,
.right-arm,
.right-leg,
.left-leg,
.right-foot,
.left-mid-arm,
.right-mid-arm{
fill:none;
stroke:#000000;
stroke-width:12;
stroke-linecap:round;
stroke-miterlimit:10;
}
g.squid {
margin-left:20px;
}
.lightning {
fill:white;
}
g.body {
fill:black;
}
.left-arm {
animation: left-arm 2s infinite;
}
.right-arm {
animation: right-arm 2s infinite;
}
#keyframes left-arm {
0% {transform: translate(0px,0px);}
20% {transform: translate(0px,0px);}
40% {transform: translate(-15px,50px);}
80% {transform: translate(0px,0px);}
100% {transform: translate(0px,0px);}
}
#keyframes right-arm {
0% {transform: translate(0px,0px);}
20% {transform: translate(0px,0px);}
40% {transform: translate(60px,50px);}
80% {transform: translate(0px,0px);}
100% {transform: translate(0px,0px);}
}
Here is a link to codepen
http://codepen.io/alcoven/pen/NbRNdd

Answer 1

So after a day of working at this I figured out that an elements position is specific to its surrounding elements. I was copying and pasting single paths from AI into a codepen and the actual vector information was aligned to the top left because the other shapes were not pasted along with it for reference. I ended up changing the actual vector numbers to align the shapes. The only one I had to change was the M#'s and the following number after the comma in front of each value.
<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;"/>
Here's my new pen
Hover on it.
http://codepen.io/alcoven/pen/mOrYBd?editors=1100