如何在同一CSS关键帧中为不同类添加动画？骨骼动画实现咨询

你给出的写法不符合CSS语法规范——关键帧内部无法嵌套子元素选择器，得换以下思路实现：

方法1：利用CSS自定义属性（变量） #

这是最适合骨骼动画的方案，通过父元素的动画修改自定义属性，子元素继承这些属性来实现同步动画：

.root {
  /* 初始化自定义属性 */
  --body-translate: 10% 10%;
  --head-translate: 5% -5%;
  /* 绑定关键帧动画 */
  animation: anim 10s infinite;
}

/* 子元素直接使用自定义属性 */
.body {
  translate: var(--body-translate);
}

.head {
  translate: var(--head-translate);
}

/* 关键帧中仅修改自定义属性值 */
@keyframes anim {
  from {
    --body-translate: 10% 10%;
    --head-translate: 5% -5%;
  }
  to {
    --body-translate: -5% 10%;
    --head-translate: 10% 0;
  }
}

这种方式可以轻松扩展到更多骨骼部位，只需新增对应的自定义属性即可，还能在关键帧中添加多个百分比阶段（比如50%、75%）实现更细腻的动画。

动画切换实现 #

要在不同动画间切换，只需给.root添加不同的类，每个类绑定独立的动画和自定义属性：

.root.anim-idle {
  --body-translate: 0 0;
  --head-translate: 0 0;
  animation: idle 3s infinite;
}

.root.anim-run {
  --body-translate: 10% 0;
  --head-translate: 5% -5%;
  animation: run 1s infinite;
}

@keyframes idle {
  0%, 100% {
    --body-translate: 0 0;
    --head-translate: 0 0;
  }
  50% {
    --body-translate: 0 2%;
    --head-translate: 0 -1%;
  }
}

@keyframes run {
  0% {
    --body-translate: 10% 0;
    --head-translate: 5% -5%;
  }
  50% {
    --body-translate: -10% 0;
    --head-translate: -5% 5%;
  }
  100% {
    --body-translate: 10% 0;
    --head-translate: 5% -5%;
  }
}

通过JavaScript切换类即可完成动画切换：

const rootEl = document.querySelector('.root');
// 从 idle 切换到 run
rootEl.classList.replace('anim-idle', 'anim-run');

工具库推荐 #

如果需要更复杂的骨骼动画控制（比如骨骼层级关联、物理效果），可以用这些库：

• GSAP：功能强大的动画库，内置骨骼动画支持，能精准控制多元素的时序、缓动曲线，切换动画逻辑简单，适合复杂场景。
• Anime.js：轻量级动画库，语法简洁，支持批量元素动画控制，适合中小型项目快速实现骨骼动画。

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