Animation on a letter

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

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%);
    }
}