CSS animations aren't working on phones(iPads are fine)

Hey guys,

I have some cool animations set up on my server.

But if I'm using my phone as client, the animations using "keyframes" method won't work(no matter what browser I'm using, they all failed)

The "transition" method however can work.

Is it becuase the browsers for phone have lesser functions than browsers for tablet or computer?

Can you please upload a minimal session file to demonstrate the issue ?

OK....Thank you for replying!

So I have a Show/Hide button here and once I click it, it's gonna trigger the animations for "Show/Hide"


Client_Animation_Problem.json (19.6 KB)

But this can never work on my phone(Safari and Chrome both can't).

However it can perfectly work on iPad.

What's the os version and browser version on your device ? I've managed to test your session successfully (the button's shadow animates when clicked) on most of the supported ios versions (except the oldest 10.3 that for some reason doesn't work in my remote testing environnement) and some android devices as well.

Emmmmm well, there should be much more than just the shadow

2022-05-01 21-54-11.zip (930.0 KB)
This is my demon video of full animations.

But the client just don't have the "Show/Hide" nor the zoom in out animations.

The shadow animations work because they are part of the "transition" animations.

I found out that if I'm using transition for animations, they'll show up on the client page.

But any animation that's done with the "keyframes" method(complex animations) won't work....

btw the version I'm using is ios15.4.1 :joy:

Ok the session file was incomplete, I have to define some css variables to make the animations work, I'll test it again later.

Oh right!

Sorry about that :scream: I forgot to upload my stylesheet...
Test.css (202 Bytes)

Here is it!