如何用CSS实现span标签文字缓慢消失并同步收窄其占位间隙

你原来的实现会出现间隙突然收拢的核心原因是position属性属于离散属性，不支持过渡动画，100%关键帧处切换为position: absolute时元素会瞬间脱离文档流，直接释放占位空间，没有渐变过程。

你只需要同时给span的透明度和占位宽度加动画即可，无需切换定位属性，修改后的代码如下：

#title {
  text-align: center;
}

#title > span {
  /* 开启行内块模式，支持盒模型属性动画 */
  display: inline-block;
  /* 超出宽度的内容隐藏，避免缩宽度时文字溢出 */
  overflow: hidden;
  animation: title 4s infinite;
}

@keyframes title {
  0% {
    opacity: 1;
    /* 设定一个足够放下span内容的最大宽度即可，不需要精确计算 */
    max-width: 80px;
  }
  50% {
    opacity: 0;
    /* 宽度收缩为0，和透明度同步变化 */
    max-width: 0;
  }
  100% {
    opacity: 0;
    max-width: 0;
  }
}

<h1 id="title">I am<span> super</span> strong</h1>

如果需要实现完整的淡入+淡出+间隙同步伸缩的循环效果，可以调整关键帧为：

@keyframes title {
  0% {
    opacity: 1;
    max-width: 80px;
  }
  25% {
    opacity: 0;
    max-width: 0;
  }
  50% {
    opacity: 0;
    max-width: 0;
  }
  75% {
    opacity: 1;
    max-width: 80px;
  }
  100% {
    opacity: 1;
    max-width: 80px;
  }
}

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