如何实现从中心起始的打字动画，结束后文本居中于灰色气泡？

要实现从中心开始的打字动画，同时让最终文本居中在灰色气泡内，需要调整布局和clip-path动画逻辑，具体修改如下：

修改后的完整代码 #

CSS #

.text-typing {
  background: #f5f5f5;
  border-radius: 2rem;
  width: 25%;
  margin: auto;
  /* 添加flex布局，确保内部文本居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 2rem; /* 增加内边距，避免文本紧贴气泡边缘 */
}

.text-typing h2 {
  margin: 0;
  white-space: nowrap;
  /* 设为inline-block，让宽度适配文本，方便居中及从中心展开 */
  display: inline-block;
  text-align: center;
  /* 初始clip-path：仅显示中间一条竖线，实现从中心起始 */
  clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
  /* steps值改为文本长度的一半，因为从中间向两边各展开11步（对应22个字符） */
  animation: typing 4s steps(11, end) forwards, blink 1s infinite;
}

@keyframes typing {
  0% {
    clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

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

HTML #

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

关键修改说明 #

• 容器布局优化：给.text-typing添加display: flex及居中属性，确保文本最终在气泡内居中显示，同时增加内边距提升视觉效果。
• 文本元素调整：将h2设为inline-block，使其宽度适配自身文本内容，为从中心展开的动画提供基础。
• clip-path动画重构：初始状态仅显示中间一条竖线，动画过程中逐步向左右扩展clip-path的范围，实现从中心向外展开的打字效果。
• steps参数调整：因为是从中心向两边同时展开，steps数值改为原文本字符数的一半（22个字符对应11步），保证逐字揭示的节奏正确。

内容的提问来源于stack exchange，提问作者kelz