关键帧动画无法与SVG一起使用...尝试通过变换向上，向右，向下倾斜某个角度并向后移动孩子。这可能吗？

Question

下面是我项目的CSS，我正在尝试使用Illustrator中的SVG代码移动HTML中的SVG元素的一部分。 HTML中的行是

<g class="Kid">    

这是我似乎无法使用的CSS关键帧...

@keyframes walking {


    25% {
        transform: translateY(225);
    }

    50% {
        transform: translateX(134);
    }

    75% {
        transform: translate3d(286, 225);
    }

    100% {
        transform: translateX(-371);
    }

}

.Kid {
    animation: walking 10s infinite linear;
}

Answer 1

这些转换是单独应用的，不是累积应用的。因此，您需要为每个阶段提供X和Y坐标。

• 向上方向为-Y。你走错路了。
• 您应提供坐标单位。

svg {
    background-color: linen;
}

.Kid {
    animation: walking 10s infinite linear;
}


@keyframes walking {

    25% {
        transform: translate(0px, -225px);
    }

    50% {
        transform: translate(134px, -225px);
    }

    75% {
        transform: translate(286px, -100px);
    }

    100% {
        transform: translate(0px ,0px);
    }

}

<svg width="400" height="400">
  <rect x="50" y="350" width="20" height="20" fill="red" class="Kid"/>
</svg>