Hello

Experimenting with animations in SVG and CSS



If someone is interested about the "guts" of this animation, you can also visit:

codepen

Greetings

Cool !

Did I read somewhere that SVG/CSS animation won't work in Firefox? Because I don't see any animation.

brynn wrote:Did I read somewhere that SVG/CSS animation won't work in Firefox? Because I don't see any animation.

Hello Brynn... You are right, in Firefox (which I used when making the post), the animation appears static. But If you go the the CODEPEN link bellow, you should see the animation, if your web browser is Firefox or Chrome.

What I know is that SVG/CSS animations doesn't work with "Micro Soft" web browsers.

More: The animation can be seen in the post if your web browser is Chrome. . Now, who is responsible for this: the web browser, the phpBB-InkscapeForum, the Dropbox web server??... If someone have even a suspect, or clue, it will be interesting to know.

I was thinking of this page: http://tavmjong.free.fr/SVG/ANIMATION/

Thanks for your info Brynn

The Tav's article (sorry for the simplification of the name)... is from 2013. Checking it on Chrome and Firefox, I see different results between them. In chrome the animations are best viewed.

- For what I've investigated and experimented myself, MS Edge, MS IE CAN'T show CSS/SVG animations. Firefox CAN show CSS/SVG animations. However I think it may be true to say that Chrome can show and manipulate better and more features related to CSS animations.

- About testing: I'm on Ubuntu Linux. I can use Firefox and Chrome. I haven't tried Opera. I have other PC, which it's not mine, where I can test with Edge or IE11. I can't test with Safari, but I guess it's not so different than Chrome. I haven't tried other devices (iphone, android phones).

Greetings

Yes, the article is a bit dated. Things certainly could have changed since then. And I haven't investigated whether your image uses the same code as in the article. So your results about which browsers work and which don't, may be more related to the specific code you used, rather than browsers changing their support (in the last 3 years).