I am trying to create a text reveal typing effect, but right now the text starts at the very beginning. How can I change it so that the text starts at the center and ends up centered within the gray bubble after the animation?

(https://i.sstatic.net/xFQaYoBi.png)

HTML:

<div class="text-typing"> 
   <h2>Experience</h2> 
</div> 

CSS:

.text-typing { 
    background: #f5f5f5; 
    border-radius: 2rem; 
    width: 25%;
    margin: auto;
} 

.text-typing h2 { 
    margin: 0px; 
    white-space: nowrap; 
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); 
    animation:  
typing 4s steps(22, end) forwards, blink 1s infinite; 
} 

@keyframes typing { 
    0% { 
        width: 0% 
    } 

    100% { 
        width: 100% 
    } 
} 

@keyframes blink { 

    0%, 
    100% { 
        border-right: 2px solid transparent; 
    } 

    50% { 
        border-right: 2px solid #222; 
    } 
} 

I have tried to change the animation itself but don’t know which part would make it so that it starts not at the very beginning.