使用CSS动画化SVG椭圆路径转换

Question

我是SVG动画的新手，并且一直在尝试使用CSS翻译功能设计的SVG中的椭圆路径动画，如CSS Tricks所述

这是椭圆本身的svg代码

<ellipse id="halo"  class="halo_path" transform="rotate(-71.04 448.99 166.502)" cx="449" cy="166.5" rx="63" ry="234.3" />

我尝试做的是让它上升几个像素然后下降（作为循环）但是当我为@keyframe添加CSS时：

.halo_path {
    transform: rotate(109deg);
    fill: none;
    stroke: #D9CC29;
    stroke-width: 25.0519;
    stroke-miterlimit: 10;
    transform-origin: center;
    animation: move_halo 2s infinite;
    animation-direction: alternate-reverse;
}

@keyframes move_halo {
    0% {
        transform: translate(0, 5px);
    }
    100% {
        transform: translate(0, -10px);
    }
}

...动画有效但椭圆路径如下所示：

我真的很感激，如果我可以让它上下动画，但是我设计椭圆的原始角度看起来像这样：

PS-I希望在没有JS或jQuery的情况下实现这一目标。

Answer 1

将动画移动到父元素，使其不会覆盖椭圆的变换。

html, body, svg {
  width: 100%;
  height: 100%;
}

ellipse {
    transform: rotate(109deg);
    fill: none;
    stroke: #D9CC29;
    stroke-width: 25.0519;
    stroke-miterlimit: 10;
    transform-origin: center;
}

.halo_path {
    animation: move_halo 2s infinite;
    animation-direction: alternate-reverse;
}

@keyframes move_halo {
    0% {
        transform: translate(0, 5px);
    }
    100% {
        transform: translate(0, -10px);
    }
}

<svg viewBox="0 0 1000 400">
    <g class="halo_path" >
    <ellipse cx="449" cy="166.5" rx="63" ry="234.3" />
    </g>
</svg>