Преобразование CSS, установленное через JS, конфликтует с анимацией CSS

Я привык использовать анимацию и т. д., Но этот меня поставил в тупик. У меня есть CSS-анимация, подобная этой, на встроенном блочном элементе div.

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 (). Проблема в том, что это не учитывается.

Отладка Chrome показывает применение обоих преобразований

Я бы предпочел не удалять режим заливки forwards, поскольку это всего лишь простой пример анимации, и от него зависят некоторые другие более сложные анимации. Я также пробовал с translate3d, но с теми же результатами.

Похоже, что анимация CSS имеет приоритет над CSS, примененным JS, это предполагаемое поведение? Думаю, я мог бы удалить CSS-анимацию с помощью javascript перед применением преобразования, но если есть что-нибудь попроще, я все слышу. Кажется, я не могу найти в Интернете ничего, что могло бы мне помочь, поэтому любые подсказки в правильном направлении будут оценены.