How to apply an animation delay to only one animation with CSS and javascript?

Question

I am new to css and javascript. I am trying to animate the spans within an h2 to fall from the top of the page on load and then on hover to have a bouncy effect. I was able to make them happen both BUT now the problem is that the animation delay I intended for the fall animation are applying to the bounce animation as well. When I add the animation name to the animation delay all the letter fall at the same time. What am I missing?

I tried specifying the animation name for the animation delay but it didn't work. When I add the animation name to the animation delay all the letter fall at the same time. What am I missing?. And I also tried to change the animation delay in JS after the first animation happens but wasn't able to figure out.

This is my html

 <h2 class="test">
                    <span class="q">T</span><span class="q">a</span><span class="q">d</span><span
                        class="q">a</span><span class="q">a</span><span class="q">k</span><span class="q">i</span>
                </h2>
                <h2 class="test2">
                    <span class="q2">K</span><span class="q2">u</span><span class="q2">w</span><span
                        class="q2">a</span><span class="q2">y</span><span class="q2">a</span><span
                        class="q2">m</span><span class="q2">a</span>
                </h2>

This is the CSS

span {
    color: black;
    font-size: 1em;
    display: flex;
    margin-bottom: 0;
    padding-bottom: 0;
}

.onLoadAnimation {
    position: relative;
    transform: translateY(-100vh);
    animation: fall 1s forwards;
    animation-iteration-count: 1;
}

@keyframes fall {
    100% {
        transform: translateY(0);
    }
}

.test span:nth-child(2) {
    animation-delay: 0.1s;
}

.test span:nth-child(3) {
    animation-delay: 0.2s;
}

.test span:nth-child(4) {
    animation-delay: 0.3s;
}

.test span:nth-child(5) {
    animation-delay: 0.4s;
}

.test span:nth-child(6) {
    animation-delay: 0.5s;
}

.test span:nth-child(7) {
    animation-delay: 0.6s;
}

.test2 span:nth-child(1) {
    animation-delay: 0.1s;
}

.test2 span:nth-child(2) {
    animation-delay: 0.12s;
}

.test2 span:nth-child(3) {
    animation-delay: 0.3s;
}

.test2 span:nth-child(4) {
    animation-delay: 0.4s;
}

.test2 span:nth-child(5) {
    animation-delay: 0.5s;
}

.test2 span:nth-child(6) {
    animation-delay: 0.6s;
}

.test2 span:nth-child(7) {
    animation-delay: 0.7s;
}

.test2 span:nth-child(8) {
    animation-delay: 0.8s;
}

.spanHoverEffect {
    color: #0f4c5c;
    animation: animate 0.6s;
}

@keyframes animate {
    25% {
        transform: scale(0.8, 1.3);
    }

    50% {
        transform: scale(1.1, 0.8);
    }

    75% {
        transform: scale(1.1, 0.8);
    }
}

This is the JS

let letters = document.getElementsByClassName("q");
let lettersTwo = document.getElementsByClassName("q2");

window.onload = () => {
    for (l of letters) {
        l.classList.toggle('onLoadAnimation');
        l.addEventListener('mouseover', function () {
            this.classList
                .remove('onLoadAnimation')
                .add('spanHoverEffect')
        });
        l.addEventListener('mouseout', function () {
            this.classList
                .remove('onLoadAnimation')
                .remove('spanHoverEffect')
        });
    }

    for (l of lettersTwo) {
        l.classList.toggle('onLoadAnimation');
        l.addEventListener('mouseover', function () {
            this.classList
                .remove('onLoadAnimation')
                .add('spanHoverEffect')
        });
        l.addEventListener('mouseout', function () {
            this.classList
                .remove('onLoadAnimation')
                .remove('spanHoverEffect')
        });
    }
};

Answer 1

In this fiddle , I made two changes. The letters fall in sequence in Chrome, Firefox and Edge and the animation delay is not present when moused over in any of those browsers.

I added the onLoadAnimation class to the CSS for each letter.

.test .onLoadAnimation:nth-child(2) {
    animation-delay: 0.1s;
}

And I removed the chained changes to classList, which is not something that classList supports in any of the browsers mentioned above.

l.classList.remove('onLoadAnimation')
l.classList.add('spanHoverEffect')

The reason I mention web browsers is that "this.classList.remove('onLoadAnimation').add('spanHoverEffect')" causes an error in all of those browsers, because remove returns undefined, so I am wondering if you are using a less-used browser that may work differently.