Почему я все еще вижу видимый переход градиентной анимации на мобильном телефоне, несмотря на использование медленной ан ⇐ CSS

[Anonymous]

Я работаю над адаптивной веб-страницей и пытаюсь добавить к фону плавную градиентную анимацию. На больших экранах градиентная анимация работает так, как и ожидалось, но когда ширина экрана меньше 900 пикселей, я все равно отчетливо вижу переход между цветами, хотя я и старался сделать анимацию как можно более медленной и едва заметной.
Вот CSS, который я использую для экранов шириной менее 900 пикселей:

Код: Выделить всё

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

Несмотря на использование медленной анимации с большой длительностью (200 секунд), градиентное движение по-прежнему очень заметно на мобильных устройствах. Я также пробовал использовать прикрепление фона: исправил и еще больше уменьшил размер фона, но это не решило проблему.
Чего мне не хватает и как я могу сделать градиент анимация становится менее заметной или даже полностью исключить ее на маленьких экранах?

Подробнее здесь: https://stackoverflow.com/questions/793 ... le-despite