仅为箭头间文本设置跳动动画，已添加heart类却不生效如何修复

常见失效根因 #

• 核心问题：行内非替换元素的动画渲染限制。display: inline 类型的元素没有独立的盒模型，基于transform、位移的动画规则会被浏览器直接忽略，哪怕给元素绑定了完整的动画类，也不会呈现任何跳动效果。
• 时序问题：动态DOM的类名绑定时序错位。如果是先把DOM节点插入页面完成渲染，再通过JS异步给#prepare-label-group追加.heart类，很容易出现样式规则匹配延迟、动画未触发的问题。
• 作用域偏差：如果写CSS选择器时把左右箭头的DOM也纳入了.heart的选择范围，要么会导致箭头跟着一起动，要么因为选择器匹配不对，导致中间文本根本匹配不到对应的动画规则。

可落地的修复步骤 #

• 调整中间文本容器的显示属性：把原本设置给#prepare-label-group的display: inline替换为display: inline-block，既保持和左右箭头的水平紧凑对齐，又让元素拥有独立盒模型，支持transform类的动画渲染。
• 调整动态DOM的绑定顺序：在通过JS生成结构时，在DOM节点插入页面前就给中间文本容器绑定好.heart类，不要等结构渲染完成后再异步追加类，避免出现样式匹配的时序差。
• 严格收窄动画作用范围：写CSS动画选择器时，确保动画规则只命中中间文本容器，左右箭头的DOM节点不被动画作用，保证箭头始终保持静止效果。

参考实现代码 #

动态生成结构的核心逻辑：

const container = document.createElement('div')
// 左箭头（不绑定动画类，保持静止）
const leftArrow = document.createElement('span')
leftArrow.textContent = '←'
// 中间文本容器
const labelGroup = document.createElement('span')
labelGroup.id = 'prepare-label-group'
// 提前绑定动画类，提前设置显示属性
labelGroup.className = 'heart'
labelGroup.style.display = 'inline-block'
labelGroup.textContent = '等待加载'
// 右箭头（不绑定动画类，保持静止）
const rightArrow = document.createElement('span')
rightArrow.textContent = '→'
// 按顺序拼接完整结构后再插入页面
container.append(leftArrow, labelGroup, rightArrow)
document.body.appendChild(container)

对应动画样式：

/* 仅作用于文本的跳动动画 */
.heart {
  animation: heartBeating 1.2s ease-in-out infinite;
}
@keyframes heartBeating {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

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