如何保留inline-block元素单词间距？多文本动画延迟实现疑问

一、修复单词间距消失问题 #

把字符拆成inline-block的span后，单词间的空格会被当成普通字符包裹进span，导致原生单词间距丢失。解决方法是遍历字符时单独处理空格：遇到空格直接插入，不包裹span，以此保留正常的单词间隔。

二、实现渐进式延迟动画 #

通过给每个span设置递增的animation-delay属性，让字母动画依次触发；同时给不同文本块设置基础延迟，实现多文本的先后动画效果。

修改后的完整代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="splitSpan">HELLO WORLD</p>
<p class="splitSpan">SECOND SENTENCE</p>

CSS

.splitSpan span{
  display: inline-block;
}

@keyframes down {
  from {transform: translateY(4px); opacity: 0;}
  to {transform: translateY(0px); opacity: 1;}
}
@keyframes up {
  from {transform: translateY(-4px); opacity: 0;}
  to {transform: translateY(0px); opacity: 1;}
}

.splitSpan span:nth-child(even){
  animation-name: down;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.splitSpan span:nth-child(odd){
  animation-name: up;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

JavaScript

$('.splitSpan').each(function (textIndex) {
  var characters = $(this).text().split("");
  var $this = $(this);
  $this.empty();
  
  // 不同文本块的基础延迟，实现多文本依次动画
  var baseDelay = textIndex * 0.5;
  
  $.each(characters, function (charIndex, el) {
    if (el === ' ') {
      $this.append(' ');
    } else {
      // 每个字母的延迟：文本块基础延迟 + 字符索引*间隔时间
      var delay = baseDelay + charIndex * 0.1;
      $this.append('<span class="letter-' + charIndex + '" style="animation-delay: ' + delay + 's">' + el + '</span>');
    }
  });
});

关键说明 #

• 空格处理：直接保留空格字符，不生成span，确保单词间距和原生一致。
• 渐进延迟：每个文本块的基础延迟为textIndex * 0.5s，第二个文本块会比第一个晚0.5秒启动；每个字母的延迟递增0.1秒，形成逐个弹出的动画效果。
• CSS优化：添加animation-fill-mode: forwards让动画结束后保持最终状态，增加透明度变化让过渡更自然。

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