如何將 animation 延遲僅應用於一個 animation 和 CSS 和 javascript？

Question

我是 css 和 javascript 的新手。我正在嘗試為 h2 中的跨度設置動畫，使其在加載時從頁面頂部落下，然后在 hover 上設置動畫以產生彈性效果。 我能夠讓它們同時發生，但現在的問題是我打算為秋季 animation 設置的 animation 延遲也適用於反彈 animation。 當我將 animation 名稱添加到 animation 時，所有字母同時落下。 我錯過了什么？

我嘗試為 animation 延遲指定 animation 名稱，但沒有成功。 當我將 animation 名稱添加到 animation 時，所有字母同時落下。 我錯過了什么？ 而且我還嘗試在第一個 animation 發生后更改 JS 中的 animation 延遲但無法弄清楚。

這是我的 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>

這是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);
    }
}

這是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

在這個小提琴中，我做了兩處改動。 這些字母在 Chrome、Firefox 和 Edge 中按順序排列，並且在任何這些瀏覽器中將鼠標懸停在上面時都不存在 animation 延遲。

我為每個字母將 onLoadAnimation class 添加到 CSS。

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

我刪除了對 classList 的鏈接更改，這不是 classList 在上述任何瀏覽器中支持的內容。

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

我提到 web 瀏覽器的原因是“this.classList.remove('onLoadAnimation').add('spanHoverEffect')”在所有這些瀏覽器中導致錯誤，因為 remove 返回未定義，所以我想知道你是否使用可能工作方式不同的較少使用的瀏覽器。