Jerky CSS animation on Android

I am using a css animation and it is working fine on iOS, very smooth and looks good.
It is very jerky and looks like rubbish on Android.

I’m sure this is a common issue but I can’t find any recent posts in here on it.

Can anyone point me in the right direction to fix this?

For reference I am using the package below but it is just normal CSS animation and works fine everywhere (web, iOS etc) except on Android.

Any help massively appreciated. I’m thinking this has to be a common issue.

Here are the comparisons:
Android (jerky)

iOS (smooth)

This is what I am using:

const slideInUp = () =>
      '{{duration}}ms {{delay}}ms',
        style({ visibility: 'visible', transform: 'translate3d(0, {{translate}}, 0)', easing: 'ease', offset: 0 }),
        style({ transform: 'translate3d(0, 0, 0)', easing: 'ease', offset: 1 })