如何将css翻译添加到现有翻译中？

我使用css翻译在屏幕上放置了一个DIV元素。这可以很好地工作，只是在以后移位相同元素时，会丢弃原始移位。

使用Java脚本设置css开始位置

div.style.transform ="translate(800px, 400px)";

在使用javascrip随机设置开始位置后，css动画只是将其重置回来。

CSS动画

@keyframes testanimation {
  0% {
    transform: translateY(20px);
  }

  100% {
    transform: translateY(80px);
  }
}

如何合并CSS转换，以将以前的位移考虑在内？在这种情况下，目标是让动画从随机的位置开始。20px-80px应该是相对的。

---

解决方案

我想最好的方法是获取以前的转换，向这些值添加一些内容，然后应用新的转换。

另一个建议是使用position、left和top设置元素的位置。例如，使用以下代码：

div.style.position = "absolute";
div.style.left = "800px";
div.style.top = "400px";

这样，转换将应用于该位置，而不是相对于上一个转换。