Browser support is generally excellent for SVG animations with CSS.

And except for the default transform origins,

there aren't many differences between CSS animations in SVG, and HTML.

However, as I'm recording this video, implementations for

some features are still inconsistent in some browsers.

Particularly in Firefox.

Now, there is an issue that happens in Firefox with transform origin and

percentage values.

You'll commonly see this referred to as the transform origin bug in Firefox.

So, I'm going to preview the workspace from the previous video

in Firefox to see if there are any differences in the transforms.

So, when I hover over the icons

notice how the transforms behave a lot different than in Chrome.

All rotations and scaling are off center,

like we saw earlier in Chrome before we explicitly defined a transform origin.

Now there's a reason why this is happening, and

it has to do with the transform origin value being set in percentages.

Currently, setting transform origin, and percentages, does not work as expected in

Firefox, because Firefox doesn't honor percentage based origins for SVG.

So to make these transforms work in Firefox,

we need to use absolute values, like pixels instead.

Now, Firefox won't even recognize keyword base origins, like right bottom, or

center center.

So, as I mentioned in the previous video.

If we set a transform origin value in pixels,

the origin will be set relative to the SVG canvas' top left corner.

So then, how do we figure out what the center transform

origin value is in pixels.

Well, in the HTML file, if we look at one of the circle element's

attributes notice the cx and cy attributes here.

These attributes define the center of the circle element.

So the center x coordinate and the center y coordinates.

Now, since the icons need to rotate and scale from the center of the circles,

I can actually use the cx and

cy values to define the icon transform origin and pixels.

So, back in my style sheet,

I'm going to change this percentage transform origin value.

To 200 pixels, 50 pixels.

All right, so now we should be good to go.

If I save my style sheet, and preview my work space again in Firefox,

once I hover over any icon we can see that the transforms are now working

just like they do in Chrome.

Browser support changes frequently.

So be sure to experiment with these properties,

to find out which features currently work or don't work, in the latest browsers.

I've also posted information on browser support for SVG transitions and

transforms, in the teacher's notes.

So up next, you're gonna learn how to create an SVG animation sequence

in a line drawn animation using CSS key frames and animation properties.