CSS Animation for SVG doesn't work in Mozilla-CodePudding

I have an SVG displayed on my webpage. I declared an animation to animate it. It works fine on Chrome but it doesn't work on Mozilla browser.

Here's my example SVG.

<svg width="400" height="110">
     <circle  cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

On my SASS file, I have this sample:

.myCircle
{
    animation: animateCircle 5s;
    
    -moz-animation: animateCircle 5s;
    -webkit-animation: animateCircle 5s;
    -ms-animation: animateCircle 5s;
}

@keyframes animateCircle 
{
    70% {
         cy: 80
    }
}

@-moz-keyframes animateCircle 
{
    70% {
         cy: 80
    }
}

@-webkit-keyframes animateCircle 
{
    70% {
         cy: 80
    }
}

That sample code works on Chrome, but in Mozilla, it just doesn't work as expected.

Here's the codepen: It's working on chrome but in mozilla, it doesn't even move.

CodePudding user response：

In CSS, values other than 0 must have units. I'm afraid you've found a Chrome bug as the Firefox implementation is correct.

All that moz and webkit stuff isn't needed any more either.

.myCircle
{
    animation: animateCircle 5s;
}

@keyframes animateCircle 
{
    70% {
         cy: 80px
    }
}

<svg width="400" height="110">
     <circle  cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>