Html – Why am I still seeing a visible gradient animation transition on mobile despite using a slow animation and reducing the background size?

I’m working on a responsive webpage and trying to add a smooth gradient animation to the background. On larger screens, the gradient animation works as expected, but when the screen width is below 900px, I can still clearly see the transition between colors, even though I have tried to make the animation as slow and subtle as possible.

Here’s the CSS I’m using for screens with a width below 900px:

 @media (max-width: 900px) {
  body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: linear-gradient(300deg, #32de84, #4FFFB0);
    background-size: 200% 200%;
    animation: gradient-animation 200s ease-in-out infinite;
  }

  @keyframes gradient-animation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
}

Despite using a slow animation with a long duration (200s), the gradient movement is still very noticeable on mobile devices. I’ve also tried using background-attachment: fixed and reducing the background size further, but it didn’t fix the issue.

What am I missing, and how can I make the gradient animation less visible or even eliminate it entirely on smaller screens?