CSS

@keyframes slide {
0% {
transform: translatex(var(--max, -170%))
}

100% {
transform: translatex(100%)
}
}

let newMax = '-100%';
document.querySelector(".news").style.setProperty('--max', newMax);

===========






=========
Валидация поля - тоже здесь

См. в нижний правый угол - Там Телеграмм

А при 600px всё станет - жёлтое.