如何实现仅作用于文本、从中间向两侧展开的幕布式显示动画

直接用CSS的clip-path属性就能实现你要的效果，完全不需要拆分字符串，兼容任意字符长度，单个大字符也能正常从中心向边缘展开，效果仅作用于文本本身，不会影响背景。

完整代码 #

HTML #

<div class="container">
  <div class="my-name">The Incredible Houdini</div>
</div>

修改后的CSS #

body {
  margin: 0;
}

.container {
  position: relative;
  font-size: 3vh;
  width: 100%;
  height: 100vh;
  background: lightblue;
}
.my-name {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  font-weight: bold;
  color: darkblue;
  /* 宽度自适应文本内容，无需手动指定固定值 */
  width: fit-content;
  white-space: nowrap;
  /* 初始状态左右各裁剪50%，仅显示文本中间区域 */
  clip-path: inset(0 50% 0 50%);
  animation: showName 5s linear 3s forwards;
}
@keyframes showName {
  to {
    /* 动画结束时裁剪值为0，完整显示所有文本 */
    clip-path: inset(0 0 0 0);
  }
}

实现说明 #

clip-path: inset()的四个参数分别对应上、右、下、左四个方向的裁剪距离，初始状态左右裁剪距离都是50%，可视区域只有文本正中间的极窄区域，动画过程中左右裁剪距离同步降到0，可视区域就会从中间向两侧均匀扩展，完全符合幕布展开的效果。

该方案优势：

• 无需拆分字符串，兼容任意字符长度，奇数、偶数个字符都能正常展示，单个字符也能实现从中心向边缘的展开效果
• 文本宽度自适应，不需要手动指定最终宽度，更换文本内容无需修改动画参数
• 没有使用背景遮挡层，效果仅作用于文本本身，不会和页面背景产生冲突
• 动画过程平滑，不会出现打字机式的字符跳变问题

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