CSS-анимация из обучающего видео не работает? ⇐ CSS

[Anonymous]

Я делаю интересный проект по анимации текста с помощью CSS. Я выполнил это руководство до T ( | за исключением фонового изображения, я использую Tekken 8. Ха-ха), но на экране ничего не анимируется. Я впервые занимаюсь анимацией, поэтому узнаю что-то новое. Код ниже.
**HTML**





Text Animation Appear Right





j
i
n
 
v
s
.
 
k
a
y
u
z
a

Tekken 8 Deluxe Edition




**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;
}

}


Подробнее здесь: https://stackoverflow.com/questions/786 ... ot-working