Search code examples
htmlcssanimationsvgtranslate

Animating an SVG ellipse path with CSS translate

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.

Solution

  • 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>