I'm a beginner when it comes to SVG animation and I've been experimenting with animating an ellipse path in an SVG using the CSS translate function as detailed on CSS Tricks.
Below 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" />
My goal is to make it move up a few pixels and then come back down in a loop, but when I applied the CSS for the @keyframe animation:
.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);
}
}
...the animation works, but the ellipse path appears straight instead of curved like this:
I would really appreciate it if I could achieve the up-and-down animation while maintaining the original angle of the ellipse design, which was like this:
PS - I am aiming to accomplish this without the use of JS or jQuery.