每个 <g> 的 CSS 动画 'origin'

Question

使用 CSS 动画，我为单词中的每个字母添加了“摆动”效果。每个字母由一个SVG组组成<g> .但是，正如您在示例中看到的那样，每个字母的效果都变得更加极端，而我希望每个字母都有一致的“摆动”(对每个字母产生相同的效果)。如何实现？

注意:为了保持问题整洁，我没有包含 SVG 源代码。需要的话可以在示例中看到。

谢谢。

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

我无法弄清楚如何使用 SVG 来做到这一点 - 我确实设法提出了与您的要求类似的东西。

部分解决方案涉及使用旋转中心点:

transform-origin: center;

查看下面的演示

#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>