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•2y 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.

Gaming

Programming

Animation on a letter