Animation on a letter

Hi everyone I get a problem with an animation on letter
<div class="title1">
<h2>
<span>c</span>
<span>h</span>
<span>e</span>
<span>z</span>

</h2>
</div>
<div class="title1">
<h2>
<span>c</span>
<span>h</span>
<span>e</span>
<span>z</span>

</h2>
</div>
the problem is a the last letter appear at the same time than the first one can I get some explication about what is going wrong my css:
h2 span{
font-weight: bold;
font-size:27.7777vh;;
text-transform: capitalize;
position: relative;
-webkit-text-stroke: 3px black;
color: transparent;
line-height: 23.1111vh;
letter-spacing: .04em;
white-space: pre;
}

.title1 h2 span{
display: inline-block;
transform: translateY(100%);
animation: reveal .5s cubic-bezier(0.075,0.82,0.165,1) forwards;

}

.title1 h2 span:nth-child(2){
animation-delay: .7s;
}

.title1 h2 span:nth-child(3){
animation-delay: .9s;
}

.title1 h2 span:nth-child(4){
animation-delay: .12s;
}


@keyframes reveal{

to{
transform: translateY(0%);
}
}
h2 span{
font-weight: bold;
font-size:27.7777vh;;
text-transform: capitalize;
position: relative;
-webkit-text-stroke: 3px black;
color: transparent;
line-height: 23.1111vh;
letter-spacing: .04em;
white-space: pre;
}

.title1 h2 span{
display: inline-block;
transform: translateY(100%);
animation: reveal .5s cubic-bezier(0.075,0.82,0.165,1) forwards;

}

.title1 h2 span:nth-child(2){
animation-delay: .7s;
}

.title1 h2 span:nth-child(3){
animation-delay: .9s;
}

.title1 h2 span:nth-child(4){
animation-delay: .12s;
}


@keyframes reveal{

to{
transform: translateY(0%);
}
}
thanks
1 Reply
DJR
DJR17mo ago
.title1 h2 span:nth-child(4){
animation-delay: .12s;
}
.title1 h2 span:nth-child(4){
animation-delay: .12s;
}
This is the same as 120 ms, while the others are 700 and 900 ms respectively. Try 1.12 s.
Want results from more Discord servers?
Add your server