CSS动画'；原产地'；对于每个<；g>；

使用CSS动画，我为单词中的每个字母添加了“摆动”效果。每个字母都由一个SVG组组成

。但是，正如您在示例中看到的，每个字母的效果都会变得更极端，而我希望每个字母都有一致的“摆动”（每个字母上的效果相同）。这怎么可能实现呢

注意：为了保持问题的整洁，我没有包含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;
            }
        }
  }
}

---

我想不出如何使用SVG—我确实想出了一些类似于您要求的东西

解决方案的一部分涉及使用旋转中心点：

transform-origin: center;

见下面的演示

#我的logo div{
显示：内联块；
颜色：红色；
字体大小：60px；
字体系列：arial；
字体大小：粗体；
文本转换：大写；
填充：透明；
过渡：所有300毫秒的缓进缓出；
变换原点：中心；
动画持续时间：400ms；
动画迭代次数：无限；
动画填充模式：无；
动画名称：抖动；
动画计时功能：轻松进出；
}
@关键帧抖动{
0% {
变换：旋转（0）平移3D（0,0,0）；
}
25% {
变换：旋转（2deg）平移3d（1px，0，0）；
}
50% {
变换：旋转（-1deg）translate3d（0，-1px，0）；
}
75% {
变换：旋转（1deg）平移3d（-1px，0，0）；
}
100% {
变换：旋转（-2deg）translate3d（-1px，-1px，0）；
}
}

o
U
T
R
A.
G
E

是否必须对每个字母使用SVG？如果添加

变换原点：中心

到

g

您将看到“摆动”位于中心。我想是你的SVG动画，而不是每个

g

谢谢@ochi-感谢你的回答，这是一个很好的解决方案。然而，由于我需要SVG，iot不能完全回答这个问题，因此我没有标记为正确。再次感谢