Animating an SVG ellipse path with CSS translate - html

Question

I'm kind of new to SVG animation and have been trying to animate an ellipse path in an SVG I designed using the CSS translate function as documented on CSS Tricks
Here is the svg code for the ellipse itself
<ellipse id="halo" class="halo_path" transform="rotate(-71.04 448.99 166.502)" cx="449" cy="166.5" rx="63" ry="234.3" />
What I'm trying to do is get it to rise a couple of pixels and come down (as a loop) but when I added the CSS for the #keyframe:
.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);
}
}
...what happens in that the animation works but the ellipse path becomes straight like this:
I'd really appreciate if I can get it to animate up and down but at the original angle which I designed the ellipse to look like which was like this:
PS-I'm looking to achieve this without JS or jQuery.

Answer 1

Move the animation to a parent element so it doesn't overwrite the ellipse's transform.
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>