Hover animation not working in Firefox

Hey guys,

I’ve created a hover animation for the projects on my home-site. The projects opacities are all at 50% as initial state, they all have a greyscale filter and the title is not visible. On hover the project which is hovered on is getting fully opaque, the greyscale filter is turned off and the title becomes visible. At the same time all the other projects opacities are reduced by another 50%.

In Chrome and in Safari it works just fine, but in Firefox the animation of the projects which are not hovered on seems to loop instead of just playing as it should.

I’ve tried many ways to solve this but couldn’t find a way yet. Maybe one of you guys has an idea.

Here’s the link to the site: https://gm013.la/
It’s already live.

And here’s the read only link: https://preview.webflow.com/preview/gm013?utm_medium=preview_link&utm_source=designer&utm_content=gm013&preview=f3cb29523ffee0b5c3190e2c549a984b&mode=preview