如何让打字动画不从头开始？

Question

我正在尝试创建文本显示打字效果，但现在文本从头开始。如何更改它，以便文本从中心开始并在动画结束后在灰色气泡内居中？

（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; 
    } 
} 

我尝试过更改动画本身，但不知道哪一部分会使其不从一开始就开始。

Answer 1

这就是你的意思吗？

.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: 50%
  }
  100% {
    width: 100%
  }
}

@keyframes blink {
  0%,
  100% {
    border-right: 2px solid transparent;
  }
  50% {
    border-right: 2px solid #222;
  }
}

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