CODEWITHSUNDEEP
animationfirefoxsvgtransformtransition
Stas Stativa
Stas Stativa

Reputation: 21

SVG animation on hover starts from wrong position in firefox

When you hover on element in Chrome, the bottom part of the clock starts moving down. If you try to do this in firefox, it starts from wrong position.

HTML

<g id="clock_bottom_3" opacity="0.316786674" transform="translate(72.000000, 306.000000)">
                    <ellipse id="Oval" fill="url(#radialGradient-1)" opacity="0.24" transform="translate(87.000000, 52.000000) rotate(-180.000000) translate(-87.000000, -52.000000) " cx="87" cy="52" rx="87" ry="52"></ellipse>
                    <ellipse id="Oval" fill="url(#radialGradient-2)" opacity="0.24" transform="translate(117.000000, 52.000000) scale(-1, 1) rotate(-180.000000) translate(-117.000000, -52.000000) " cx="117" cy="52" rx="87" ry="52"></ellipse>
                </g>

CSS:

#clock_bottom_3 {transition: transform 0.3s;}
svg:hover #clock_bottom_3 {transform: translate(72px, 320px);}

https://jsfiddle.net/kd7x068g/

Upvotes: 2

Views: 502

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101830

It seems you might have struck a bug in Firefox.

Here's a simplified version of your SVG:

#clock_bottom_3 {transition: transform 0.3s;}

svg:hover #clock_bottom_3 {transform: translate(72px, 320px);}
<svg width="588px" height="512px" viewBox="0 0 588 512">
    <g id="clock_bottom_3" transform="translate(72 306)">
        <ellipse fill="blue" cx="87" cy="52" rx="87" ry="52"></ellipse>
    </g>
</svg>

You are transitioning between two translate() transforms on hover. This works in Chrome, but doesn't work in Firefox. It appears as if Firefox is ignoring the initial transform on the object and transitioning from (0,0) instead.

The fix for now is to wrap "clock_bottom_3" in another group and apply the transition to that instead.

#clock_bottom_3_wrap {transition: transform 0.3s;}

svg:hover #clock_bottom_3_wrap {transform: translate(0px, 14px);}
<svg width="588px" height="512px" viewBox="0 0 588 512">
    <g id="clock_bottom_3_wrap">
        <g id="clock_bottom_3" transform="translate(72 306)">
            <ellipse fill="blue" cx="87" cy="52" rx="87" ry="52"></ellipse>
        </g>
    </g>
</svg>

If we make that modification to your original fiddle, it works.

Upvotes: 1

Related Questions