Warum sehe ich auf Mobilgeräten immer noch einen sichtbaren Verlaufsanimationsübergang, obwohl ich eine langsame Animati ⇐ HTML

[Guest]

Ich arbeite an einer responsiven Webseite und versuche, dem Hintergrund eine sanfte Verlaufsanimation hinzuzufügen. Auf größeren Bildschirmen funktioniert die Verlaufsanimation wie erwartet, aber wenn die Bildschirmbreite unter 900 Pixel liegt, kann ich den Übergang zwischen den Farben immer noch deutlich erkennen, obwohl ich versucht habe, die Animation so langsam und subtil wie möglich zu gestalten.
Hier ist das CSS, das ich für Bildschirme mit einer Breite unter 900 Pixel verwende:

Code: Select all

 @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%;
}
}
}

Trotz der Verwendung einer langsamen Animation mit langer Dauer (200 Sekunden) ist die Verlaufsbewegung auf Mobilgeräten immer noch deutlich erkennbar. Ich habe auch versucht, „background-attachment:fixed“ zu verwenden und die Hintergrundgröße weiter zu reduzieren, aber das Problem wurde dadurch nicht behoben.
Was fehlt mir und wie kann ich den Farbverlauf erstellen? Animationen weniger sichtbar machen oder sie auf kleineren Bildschirmen sogar ganz eliminieren?