如何为已有translate3d定位的div添加相对位移的shake关键帧动画？

你的问题核心在于：CSS动画中定义的transform会直接覆盖元素原本的内联transform属性，导致原有位移被清除，元素回到初始位置。下面提供两种可行的解决思路：

方案一：用CSS变量存储初始位移，结合calc()叠加动画偏移 #

通过JavaScript把初始的translate值存入CSS自定义属性（变量），然后在关键帧动画中用calc()基于这些变量叠加抖动偏移，这样就能保留原有位移。

实现步骤： #

1. JavaScript设置内联样式时，同时定义CSS变量：

const targetDiv = document.querySelector('.your-div');
// 初始位移值
const tx = '20px';
const ty = '40px';
// 存入CSS变量
targetDiv.style.setProperty('--initial-tx', tx);
targetDiv.style.setProperty('--initial-ty', ty);
// 用变量设置初始transform
targetDiv.style.transform = `translate3d(var(--initial-tx), var(--initial-ty), 0)`;

2. 修改shake关键帧，基于变量叠加偏移：

@keyframes shake {
  0%, 100% {
    transform: translate3d(var(--initial-tx), var(--initial-ty), 0);
  }
  25% {
    transform: translate3d(calc(var(--initial-tx) - 5px), var(--initial-ty), 0);
  }
  50% {
    transform: translate3d(calc(var(--initial-tx) + 5px), var(--initial-ty), 0);
  }
  75% {
    transform: translate3d(calc(var(--initial-tx) - 5px), var(--initial-ty), 0);
  }
}

这样动画运行时，会始终基于--initial-tx和--initial-ty的初始值叠加抖动，不会清除原有位移。

方案二：嵌套元素分离位移与动画 #

如果不想改动JS逻辑，可以通过嵌套DOM元素，把位移和动画分别作用在不同层级上：父容器负责初始位移，子元素应用shake动画，两者的transform效果会自动叠加。

实现步骤： #

1. 调整HTML结构：

<div class="position-container" style="transform: translate3d(20px, 40px, 0);">
  <div class="content shake"></div>
</div>

2. 保持原有shake关键帧不变（比如基于原点的抖动）：

@keyframes shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-5px, 0, 0); }
  50% { transform: translate3d(5px, 0, 0); }
  75% { transform: translate3d(-5px, 0, 0); }
}

父容器的位移会和子元素的动画位移叠加，最终效果就是在初始位置基础上抖动。

方案对比 #

• 方案一：无需修改DOM结构，适合已有DOM结构不便调整的场景，但需要JS配合设置CSS变量；
• 方案二：逻辑更简洁，不需要改动原有JS代码，仅调整HTML结构即可实现叠加效果。

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