JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myID" class="red">Hello world</div>

CSS

body {
    height: 1100px;
}
#myID {
    position: fixed;
    height:100px;
    line-height: 20px;
    transition: all 1s;
}
.blue {
    background: blue;
    animation: myAnimation 1s both;
}
.red {
    background:red;
}
@keyframes myAnimation {
    0% {
        border-radius: 0px;
        line-height: 10px;
    }
    100% {
        border-radius: 100%;
        line-height:100px;
    }
}

JavaScript

myID = document.getElementById("myID");

var myScrollFunc = function () {
    var y = window.scrollY;
    if (y > 500) {
        // myID.style.backgroundColor = "blue"; // you can add individual styles 
        myID.className = "blue" // or add classes
    } else {
        // myID.style.backgroundColor = "red";
        myID.className = "red"
    }
};

window.addEventListener("scroll", myScrollFunc);