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.
https://filipows.github.io/angular-animations/

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 = () =>
  animation([
    animate(
      '{{duration}}ms {{delay}}ms',
      keyframes([
        style({ visibility: 'visible', transform: 'translate3d(0, {{translate}}, 0)', easing: 'ease', offset: 0 }),
        style({ transform: 'translate3d(0, 0, 0)', easing: 'ease', offset: 1 })
      ])
    )
  ]);