CSS animation 'origin' for each <g>

Question

Using CSS animation, I am adding a 'wobble' effect to each letter in a word. Each letter is made up of an SVG group <g>. However, as you can see in the example, the effect gets more extreme with each letter, whereas I want a consistent 'wobble' per letter (the same effect on each letter). How can this be acheived?

Note: I have not included the SVG source code, to keep the question tidy. It can be seen in the example if needed.

Thanks.

SCSS

// Logo
.logo {
    position: fixed;
    top: 50%;
    left: 50%;
  transform: translate(-50%,-50%);
    z-index: 1;
    width: 260px;
    display: block;

    // SVG
    svg {
        display: block;
        width: 100%;
        overflow: visible;

        g {
            fill: transparent;
            transition: all 300ms ease-in-out;

            @keyframes wobble {
              0% { transform: rotate(0) translate3d(0, 0, 0) }
              25% { transform: rotate(2deg) translate3d(1px, 0, 0) }
              50% { transform: rotate(-1deg) translate3d(0, -1px, 0) }
              75% { transform: rotate(1deg) translate3d(-1px, 0, 0) }
              100% { transform: rotate(-2deg) translate3d(-1px, -1px, 0) }
            }

            animation-duration: 400ms;
            animation-iteration-count: infinite;
            animation-fill-mode: none;
            animation-name: wobble;
            animation-timing-function: ease-in-out;

            path {
                fill: red;
            }
        }
  }
}

Example

Answer 1

I could not figure out how to do it with SVGs - I did manage to come up with something similar to your requirement.

Part of the solution involved using a center point for the rotation:

transform-origin: center;

See demo below

#my-logo div {
  display: inline-block;
  color: red;
  font-size: 60px;
  font-family: arial;
  font-weight: bolder;
  text-transform: uppercase;
  fill: transparent;
  transition: all 300ms ease-in-out;
  transform-origin: center;
  animation-duration: 400ms;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-name: wobble;
  animation-timing-function: ease-in-out;
}

@keyframes wobble {
  0% {
    transform: rotate(0) translate3d(0, 0, 0);
  }
  25% {
    transform: rotate(2deg) translate3d(1px, 0, 0);
  }
  50% {
    transform: rotate(-1deg) translate3d(0, -1px, 0);
  }
  75% {
    transform: rotate(1deg) translate3d(-1px, 0, 0);
  }
  100% {
    transform: rotate(-2deg) translate3d(-1px, -1px, 0);
  }
}

<div id="my-logo">
  <div>o</div>
  <div>u</div>
  <div>t</div>
  <div>r</div>
  <div>a</div>
  <div>g</div>
  <div>e</div>
  <div>
    <!-- also works with images -->
    <img src="http://placekitten.com/100/100" />
  </div>
</div>