使用 CSS 翻译动画 SVG 椭圆路径

Question

我是 SVG 动画的新手，一直在尝试使用 CSS 翻译功能设计的 SVG 中的椭圆路径动画，如 CSS 技巧[=15= 中所述]

这是椭圆本身的 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-我希望在没有 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>

使用 CSS 翻译动画 SVG 椭圆路径

Animating an SVG ellipse path with CSS translate

html

css

animation

svg

translate