Animation doesn't work at Chrome and Firefox?

Design help Animations & Interactions
1

Hi All,

I am creating a custom menu and working on its open/close effect. I made it in Safari but the animation doesn’t show up in Chrome and Firefox. Could you help have a look? Thank you so much!

Besides from the problem above, the menu effect still looks buggy with these small problems, do you guys have any idea on them:

  1. I’ve added the close animation but it just not happen at all
  2. The open effect is ok in Safari, but the transition doesn’t look smooth. Sometimes it will just freeze.

Thank you so much for your help

Preview link of the page:
https://newcity-dlx.webflow.io/about

Here is my public share link:
https://preview.webflow.com/preview/newcity-dlx?utm_medium=preview_link&utm_source=designer&utm_content=newcity-dlx&preview=65c7b064125d6da17a29e14858559e2d&pageId=5d60f75fad30d3071d32a8ad&mode=preview

2

Hi @StellaLiu,

I took a quick look on your menu animations and I see that they are working on both Chrome and Firefox.

Here is a short video of that test and the versions I am running too.
CloudApp

3

Hi Brandon,

Thanks so much for your time.

Sorry I didn’t explain it clear. The button animation and hover effect are good, they both work well in Chrome and Firefox. But the ‘circle expand’ effect on the image background is gone in Chrome and Firefox.

I’ve took a screen record about this effect on my Safari:

You can also find out the small problems I mentioned from the screen record:

  1. The reverse animation is not showing, even it’s already in my file.
  2. The transaction is not very smooth?

Thank you so much again!