如何在主流浏览器（含Chrome）实现单个字母的旋转过渡动画

嘿，我之前也踩过这个坑！你的思路其实没问题，Chrome里inline元素确实不吃transform那一套，必须加display: inline-block才能让旋转放大生效，但空格消失的问题很好解决，给空格单独做个处理就行～

核心问题拆解 #

• Chrome中inline元素默认不支持CSS transform，所以必须给每个字母的span设置display: inline-block才能让动画生效
• 直接拆分文本时，空格会被浏览器当成无意义的空白节点忽略，或者没被包裹进span，导致最终排版丢失空格

具体实现方案 #

1. 文本拆分：把空格也包裹进独立span #

拆分句子时，不仅处理字母，还要把空格单独放进span并加专属类（比如.space），这样既能保留空格宽度，又不影响其他字母的动画逻辑。

2. CSS动画+空格适配 #

给普通字母span写旋转放大的动画，给空格span设置和原生空格一致的宽度，不需要动画（或者保持透明直到对应时机）。

完整代码示例 #

HTML（手动/JS自动生成都可以）

<p class="animated-text">Hello World</p>

JavaScript（自动拆分文本，包含空格）

const animatedText = document.querySelector('.animated-text');
const rawText = animatedText.textContent;
animatedText.innerHTML = '';

rawText.split('').forEach((char, index) => {
  const span = document.createElement('span');
  if (char === ' ') {
    span.classList.add('space');
    span.textContent = ' ';
  } else {
    span.textContent = char;
  }
  // 逐个延迟动画，实现依次出现的效果
  span.style.animationDelay = `${index * 0.1}s`;
  animatedText.appendChild(span);
});

CSS样式（兼容webkit内核）

.animated-text span {
  display: inline-block;
  opacity: 0;
  transform: rotate(0deg) scale(0.5);
  animation: rotateScaleIn 0.5s forwards;
  /* 兼容Chrome等webkit浏览器 */
  -webkit-opacity: 0;
  -webkit-transform: rotate(0deg) scale(0.5);
  -webkit-animation: rotateScaleIn 0.5s forwards;
}

/* 给空格设置和原生空格匹配的宽度 */
.animated-text .space {
  width: 0.5em; /* 可根据字体大小调整 */
  opacity: 1;
  animation: none;
  -webkit-animation: none;
}

@keyframes rotateScaleIn {
  to {
    opacity: 1;
    transform: rotate(360deg) scale(1);
  }
}

@-webkit-keyframes rotateScaleIn {
  to {
    opacity: 1;
    -webkit-transform: rotate(360deg) scale(1);
  }
}

额外优化小技巧 #

• 不想单独设置空格宽度的话，也可以给父元素加white-space: pre，但这种方式可能影响整体排版，不如单独处理空格灵活
• 动画参数（旋转角度、缩放比例、延迟时间）都可以按需调整，比如把旋转改成180度，或者缩放从0开始

这样调整后，Chrome里动画正常生效，空格也能完美保留啦！

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