跟随教程实现的CSS文字动画无法生效，求技术排查

问题说明 #

正在做一个CSS文字动画项目，完全按教程操作，仅替换了《铁拳8》背景图，但没有任何动画效果。作为CSS动画新手，附上相关代码。

原始HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Animation Appear Right</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section class="wrapper">
        <section class="textArea">
          <span>j</span>
          <span>i</span>
          <span>n</span>
          &nbsp;
          <span>v</span>
          <span>s</span>
          <span>.</span>
          &nbsp;
          <span>k</span>
          <span>a</span>
          <span>y</span>
          <span>u</span>
          <span>z</span>
          <span>a</span>
        </section>
        <p>Tekken 8 Deluxe Edition</p>
    </section>
</body>
</html>

原始CSS代码 #

body{
    background-image: url(tekkenbackgroung.jpg);
    background-size: cover;
    -webkit-background-size: cover; /*Find out what this means?*/
    background-position: center center;
    height: 100vh; /*Find out what this means too?*/
}

.wrapper{
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
}

.wrapper p{
    font-size: 60px;
    letter-spacing: 2px;
    margin: 15px 0;
    color: white;
    font-weight: bold;

}

span{
    font-size: 30px;
    letter-spacing: 2px;
    margin: 15px 0;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}

.text-area{
    font-size: 100px;
    font-weight: bold;
    letter-spacing: -5px;
}

.text-area span{
    color: #262626;
    opacity: 0;
    transform: translate(-300px, 0) scale(0);
    animation-name: animate;
    animation: animate 3s forwards;
    display: inline-block;
}

.text-area span:nth-of-type(2){
    animation-delay: .1s;
}

.text-area span:nth-of-type(3){
    animation-delay: .2s;
}

.text-area span:nth-of-type(4){
    animation-delay: .3s;
}

.text-area span:nth-of-type(5){
    animation-delay: .4s;
}

.text-area span:nth-of-type(6){
    animation-delay: .5s;
}

.text-area span:nth-of-type(7){
    animation-delay: .6s;

}
.text-area span:nth-of-type(8){
    animation-delay: .7s;
}

.text-area span:nth-of-type(9){
    animation-delay: .8s;
}

.text-area span:nth-of-type(10){
    animation-delay: .9s;
}

.text-area span:nth-of-type(11){
    animation-delay: .10s;
}

.text-area span:nth-of-type(12){
    animation-delay: .11s;
}

@keyframes animate{
    60%{
        transform: translate(20px, 0) scale(1);
        color: white;
    }

    80%{
        transform: translate(20px, 0) scale(1);
        color: white;
    }

    99%{
        transform: translate(0) scale(1.2);
        color: #2a8c54;
    }

    100%{
        transform: translate(0) scale(1);
        color: white;
        opacity: 1;
    }

}

核心问题与修复步骤 #

1. 类名大小写不匹配（最关键） #

HTML里的文字容器类是textArea（驼峰写法），但CSS里写的是.text-area（短横线写法），导致动画样式完全没绑定到元素上。把CSS中所有.text-area改成.textArea即可。

2. 动画属性重复定义 #

CSS中同时写了animation-name: animate;和animation: animate 3s forwards;，后者会完全覆盖前者，删掉重复的animation-name: animate;。

3. 动画延迟写法错误 #

.10s、.11s这种写法不规范，浏览器无法识别，要改成1.0s、1.1s。

4. nth-of-type计数偏差 #

HTML里的 会被当作独立节点，导致span:nth-of-type的序号和实际span数量对不上。解决方法二选一：

• 把 换成<span>&nbsp;</span>，这样所有空格也变成span节点，nth-of-type可以按顺序计数；
• 跳过空格节点，手动调整每个span的delay序号（比如第一个空格后，下一个span是第4个nth-of-type）。

额外说明 #

• -webkit-background-size: cover;是给旧版Chrome/Safari等webkit内核浏览器做的兼容，现在大部分浏览器支持标准background-size，可留可删；
• height: 100vh;是让body高度等于当前浏览器视口高度，确保背景铺满整个屏幕。

修复后的完整CSS代码 #

body{
    background-image: url(tekkenbackgroung.jpg);
    background-size: cover;
    -webkit-background-size: cover; /* 旧版webkit浏览器兼容 */
    background-position: center center;
    height: 100vh; /* 让body高度匹配视口 */
}

.wrapper{
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
}

.wrapper p{
    font-size: 60px;
    letter-spacing: 2px;
    margin: 15px 0;
    color: white;
    font-weight: bold;
}

span{
    font-size: 30px;
    letter-spacing: 2px;
    margin: 15px 0;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}

.textArea{
    font-size: 100px;
    font-weight: bold;
    letter-spacing: -5px;
}

.textArea span{
    color: #262626;
    opacity: 0;
    transform: translate(-300px, 0) scale(0);
    animation: animate 3s forwards;
    display: inline-block;
}

/* 调整后的延迟，跳过两个非span的空格节点 */
.textArea span:nth-of-type(1){animation-delay: 0s;}
.textArea span:nth-of-type(2){animation-delay: .1s;}
.textArea span:nth-of-type(3){animation-delay: .2s;}
.textArea span:nth-of-type(4){animation-delay: .4s;}
.textArea span:nth-of-type(5){animation-delay: .5s;}
.textArea span:nth-of-type(6){animation-delay: .6s;}
.textArea span:nth-of-type(7){animation-delay: .8s;}
.textArea span:nth-of-type(8){animation-delay: .9s;}
.textArea span:nth-of-type(9){animation-delay: 1.0s;}
.textArea span:nth-of-type(10){animation-delay: 1.1s;}
.textArea span:nth-of-type(11){animation-delay: 1.2s;}
.textArea span:nth-of-type(12){animation-delay: 1.3s;}

@keyframes animate{
    60%{
        transform: translate(20px, 0) scale(1);
        color: white;
    }

    80%{
        transform: translate(20px, 0) scale(1);
        color: white;
    }

    99%{
        transform: translate(0) scale(1.2);
        color: #2a8c54;
    }

    100%{
        transform: translate(0) scale(1);
        color: white;
        opacity: 1;
    }
}

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