如何通过CSS和JavaScript仅为单个动画设置延迟？

问题根源 #

你直接给span元素设置了animation-delay，这个延迟会作用在所有应用到该元素的动画上，包括hover时的弹跳动画。而且移除onLoadAnimation类后，元素本身的延迟样式依然存在，导致hover动画被延迟触发。

修改步骤 #

1. 将下落动画的延迟绑定到onLoadAnimation类：把原来直接给span设置的延迟，改为给带有onLoadAnimation类的span设置，这样延迟只作用于下落动画，移除类后延迟也会消失。
2. 强制hover动画无延迟：在spanHoverEffect类里明确设置animation-delay: 0s，确保弹跳动画立即触发。
3. 规范JS类操作：用add()替代toggle()确保加载时必加动画类，分开类操作语句提升可读性。

修改后的完整代码 #

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: inline-flex; /* 改为inline-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 .onLoadAnimation:nth-child(2) {
    animation-delay: 0.1s;
}
.test .onLoadAnimation:nth-child(3) {
    animation-delay: 0.2s;
}
.test .onLoadAnimation:nth-child(4) {
    animation-delay: 0.3s;
}
.test .onLoadAnimation:nth-child(5) {
    animation-delay: 0.4s;
}
.test .onLoadAnimation:nth-child(6) {
    animation-delay: 0.5s;
}
.test .onLoadAnimation:nth-child(7) {
    animation-delay: 0.6s;
}

.test2 .onLoadAnimation:nth-child(1) {
    animation-delay: 0.1s;
}
.test2 .onLoadAnimation:nth-child(2) {
    animation-delay: 0.12s;
}
.test2 .onLoadAnimation:nth-child(3) {
    animation-delay: 0.3s;
}
.test2 .onLoadAnimation:nth-child(4) {
    animation-delay: 0.4s;
}
.test2 .onLoadAnimation:nth-child(5) {
    animation-delay: 0.5s;
}
.test2 .onLoadAnimation:nth-child(6) {
    animation-delay: 0.6s;
}
.test2 .onLoadAnimation:nth-child(7) {
    animation-delay: 0.7s;
}
.test2 .onLoadAnimation:nth-child(8) {
    animation-delay: 0.8s;
}

.spanHoverEffect {
    color: #0f4c5c;
    animation: animate 0.6s;
    animation-delay: 0s; /* 强制hover动画无延迟 */
    animation-iteration-count: 1;
}

@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 (let l of letters) {
        l.classList.add('onLoadAnimation');
        l.addEventListener('mouseover', function () {
            this.classList.remove('onLoadAnimation');
            this.classList.add('spanHoverEffect');
        });
        l.addEventListener('mouseout', function () {
            this.classList.remove('spanHoverEffect');
        });
    }

    // 处理第二组字母
    for (let l of lettersTwo) {
        l.classList.add('onLoadAnimation');
        l.addEventListener('mouseover', function () {
            this.classList.remove('onLoadAnimation');
            this.classList.add('spanHoverEffect');
        });
        l.addEventListener('mouseout', function () {
            this.classList.remove('spanHoverEffect');
        });
    }
};

内容的提问来源于stack exchange，提问作者nataliovalles