Animation of text reveal letter by letter

 <div class="title">
                           <p>
                            <span>w</span>
                            <span>e</span>
                            <span>&nbsp;</span>
                            <span>a</span>
                            <span>r</span>
                            <span>e</span>
                            <span>&nbsp;</span>
                            <span>l</span>
                            <span>a</span>
                            <span>x</span>
                            <span>e</span>
                            <span>r</span>    
                           </p>
                     </div>

.title{
width: 100%;
height: 200px;
overflow: hidden;
z-index: 4;
margin:45px auto;

}

.title p span{
    display: inline-block;
    font-size:12vw;
    text-transform: capitalize;
   white-space:pre;
    font-weight: 300;
    line-height: 1;
    letter-spacing:- .2em;
    transform: translateY(150%);
   padding-left:5px;
    animation: slideUp 4.5s cubic-bezier(0.075,0.82,0.165,1) forwards;
    animation-delay: calc(2.5s + 4.5s + 5s/2 300ms + 1.9s);
}

.title p span:nth-child(2){
    animation-delay:.6s;
}
.title p span:nth-child(3){
    animation-delay:1s;
}
.title p span:nth-child(4){
    animation-delay:1.2s;
}
.title p span:nth-child(5){
    animation-delay:1.4s;
}
.title p span:nth-child(6){
    animation-delay:1.7s;
}
.title p span:nth-child(7){
    animation-delay:1.9s;
}
.title p span:nth-child(8){  
     animation-delay:2s;
    }
.title p span:nth-child(9){
    animation-delay:2.9s;
}


@keyframes slideUp{
   to{
    transform: translateY(0);
   }
}