So I love animating my pages using JavaScript and changing CSS rules with it by having a transition rule.

Only problem is, if I need 2 changes simultaneously I need to delay them. Is there a more efficient (bug proof) way of doing this? Is it wrong, and perhaps is there a similar alternative?

.welcome{
    opacity: 0;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);

    transition: top .4s, opacity .6s;
}

    content.style.transform = "translateY(20px)"
    content.style.opacity = 0

    setTimeout(() => {
        content.style.transition = "initial"
        content.style.transform = "translateY(-20px)"
        setTimeout(() => {
            content.style.removeProperty("transition")
            content.style.removeProperty("transform")
            content.style.opacity = 1
            content.innerHTML = ""
            content.appendChild(motd)
        }, 10);
    }, 300);