CSS animation looks different on browsers, why?

#1

Hi everyone,

I’ve noticed that my CSS animation looks fine on Chrome but behaves differently on Firefox and Safari—either slower or not displaying properly. I’ve checked for basic compatibility, but the issue persists.

Has anyone experienced this? What are some ways to make CSS animations more consistent across browsers?

I’m thinking about contacting a web design agency, but any troubleshooting tips would be appreciated before I do.

Thanks for your insights!

#2

Hard to know without seeing the animation and code.

I think safari and some other browsers still rely on browser-specific prefixes to work

And always use specific units, like px, %, or em.

Some timing functions like ‘ease’ render differently - try using cubic beizer or linear etc.

There are other things to ensure it’s running smoothly - but best if you post the codes/animations etc.

1 Like
#3

Even though most browsers adhere to W3C standards for HTML, CSS, and JavaScript- there are still some differences in the way they are implemented.

1 Like