CSS animation is good on desktop, but lags on mobile?

Store Design
, ,
1

I have an animation for the ‘SALE’ badge for on sale products. It is a flip animation. It can be seen on my homepage. It runs fine on desktop, but on mobile devices it seems to be very laggy?

My website is: ramenglow.com

My website speed score is 41 on the homepage, if that helps.

The code below is the code I used for the animation.

animation: 5s anim-flipX ease infinite;

@keyframes anim-flipX {
  0% {
    opacity: 1;
    transform: rotateX(90def);
  }
  50% {
    opacity: 1;
    transform: rotateX(720deg);
  }
  100% {
    /* animate nothing to pause animation at the end */
    opacity: 1;
    transform: rotateX(720deg);
  }
}

Thanks for the help.

2

Hello @styleshop27 ,

Those codes you’re using is not be too resource-intensive for mobile devices. However, there are a few things you can try to optimize the animation further:

  • Use backface-visibility: hidden; to improve performance: This CSS property tells the browser not to render the backface of the element, which can improve performance by reducing the amount of rendering required.
  • Simplify the animation: You can try simplifying the animation by reducing the number of frames or removing unnecessary properties.
  • Use ‘will-change: transform;’ to optimize for hardware acceleration: This CSS property tells the browser to prepare for the upcoming animation and can help optimize the animation for hardware acceleration.

You can update your keyframes animation to include these optimizations:

@keyframes anim-flipX {
  0% {
    opacity: 1;
    transform: rotateX(90deg);
    backface-visibility: hidden;
  }
  50% {
    opacity: 1;
    transform: rotateX(720deg);
    will-change: transform;
  }
  100% {
    opacity: 1;
    transform: rotateX(720deg);
    will-change: transform;
  }
}

Hope this can help. Let us know if you have any further questions.

Regards,

AliReviews team.

3

Hey,

I tried this and I can’t use backface-visibility: hidden - the animation flips so the back of the text is seen, so it needs to be visible. Also, I tried will-change and it made the animation very rigid and it still doesn’t work on mobile.