通过JS的CSS转换集与CSS动画冲突

Question

我很习惯使用动画等等，但是这个让我很难过。我在内联块div元素上有这样的CSS动画。

0% {
  opacity: 0;
  -webkit-transform: translateY(40px);
  transform: translateY(40px);
}

100% {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

用

解雇

animation: fade-in-b 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;

然后我希望在滚动时为元素添加视差效果，因此JS也使用translateY（）修改transform属性。问题是没有考虑到这一点。

Chrome's debug showing both transforms being applied

我不想删除forwards填充模式，因为这只是动画的一个简单示例，而其他一些更复杂的动画依赖于它。我也试过translate3d，但结果相同。

似乎CSS动画优先于JS应用的CSS，这是预期的行为吗？我想我可以在应用转换之前通过javascript删除CSS动画，但是如果有更容易的事情，那么我的所有耳朵都是如此。我似乎无法在网上找到任何帮助我的东西，所以任何正确方向的提示都会受到赞赏。