CSS动画无法作用于HTML单个文本字符，请求排查解决

你的代码没效果的核心原因是：<span> 是行内元素，CSS的 transform: rotate() 对行内元素不生效——行内元素没有独立的布局盒模型，无法执行旋转这类几何变换。

修复方案 #

给 .end 类添加 display: inline-block（或者 inline-flex），让每个字符所在的span变成行内块级元素，这样就能支持transform变换了。同时可以加上 transform-origin 调整旋转原点，让摆动效果更贴近字符自然摆动的感觉。

修改后的完整代码 #

.ending-credit {
  padding-top: 200px;
  text-align: center;
}

.end {
  display: inline-block; /* 关键：让span具备可变换的盒模型 */
  transform-origin: bottom center; /* 可选：将旋转原点设为字符底部中心，摆动更自然 */
  animation-duration: 4s;
  animation-name: sway;
  animation-iteration-count: infinite;
}

@keyframes sway {
  0%,
  100% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(20deg);
  }
}

<p class="ending-credit">
  <span class="end">I</span>
  <span class="end">w</span>
  <span class="end">i</span>
  <span class="end">l</span>
  <span class="end">l</span>
  <span class="end">r</span>
  <span class="end">e</span>
  <span class="end">t</span>
  <span class="end">u</span>
  <span class="end">r</span>
  <span class="end">n</span> ...
</p>

额外优化（可选） #

如果想让字符摆动更有节奏感，可给每个span设置不同的动画延迟，让摆动错开：

.end:nth-child(2) { animation-delay: 0.2s; }
.end:nth-child(3) { animation-delay: 0.4s; }
.end:nth-child(4) { animation-delay: 0.6s; }
/* 依次给后续字符增加延迟即可 */

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