如何针对CSS类而非ID实现文字抖动动画？

原代码通过JavaScript把ID为wiggle的元素内容拆分为单个<span>标签，配合CSS实现波浪抖动动画效果。但将ID改为类选择器（把getElementById替换为getElementsByClassName、#wiggle替换为.wiggle）后动画失效，需要修改JavaScript使其支持多个带有该类的元素，同时保留原有动画功能。

解决方法与修改要点 #

• 遍历类元素集合：getElementsByClassName返回的是类数组形式的元素集合，必须逐个遍历处理每个元素，不能像处理单个ID元素那样直接操作
• 独立处理每个元素的内容：对每个带wiggle类的元素，单独缓存原始HTML内容、清空元素、拆分字符并重新生成带动画延迟的<span>标签
• 保留原有动画逻辑：字符的动画延迟计算逻辑保持不变，确保每个元素内的字符仍能呈现波浪式抖动效果

修正后的完整代码 #

JavaScript

function wiggle(){
  // 获取所有带wiggle类的元素
  var parents = document.getElementsByClassName("wiggle");
  
  // 遍历每个元素进行处理
  for (var j = 0; j < parents.length; j++) {
    var parent = parents[j];
    var string = parent.innerHTML;
    parent.innerHTML = "";
    var chars = string.split("");
    var length = chars.length;
    
    for (var i = 0; i < length; i++) {
      parent.innerHTML += "<span style='--n:"+ (100 * i - 10000 + 'ms') + ";'>" + chars[i] + "</span>";
    }
  }
}

wiggle()

CSS

.wiggle span{
  animation-delay: var(--n);
  animation: wave 2s linear infinite forwards running;
  position: relative;
}

@keyframes wave{
  0% {top: 0px;}
  25% {top: -4px;}
  50% {top: 0px;}
  75% {top: 4px;}
  100% {top: 0px;}
}

HTML

<h1 class="wiggle">This text should wiggle...</h1>

<h2 class="wiggle">Now this text should wiggle too!</h2>

效果说明 #

修改后，所有带有wiggle类的标题元素都会将内部文本拆分为独立的<span>标签，每个字符按顺序应用波浪抖动动画，实现多元素同时生效的动画效果，完全保留了原有的波浪动画节奏。

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