要保持CSS动画中的JS值，可以使用以下两种解决方法：

1. 使用CSS变量（CSS Variables）： CSS变量是一种在CSS中定义的可重用值，可以在动画过程中保持其值不变。我们可以在JS中使用setProperty方法来更新CSS变量的值。

HTML代码：

CSS代码：

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  --animation-duration: 2s; /* 定义CSS变量 */
  animation: myAnimation var(--animation-duration) infinite;
}

@keyframes myAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

JS代码：

const box = document.getElementById('box');

// 更新CSS变量的值
box.style.setProperty('--animation-duration', '4s');

这样，当我们更新CSS变量--animation-duration的值时，CSS动画的持续时间也会相应地改变。

2. 使用JS控制动画： 通过JS控制动画的方式可以更灵活地改变动画的行为。我们可以使用JS中的requestAnimationFrame方法来手动更新CSS属性的值，并实现动画效果。

HTML代码：

CSS代码：

#box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.animation {
  animation: myAnimation 2s infinite;
}

@keyframes myAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

JS代码：

const box = document.getElementById('box');
let animationDuration = 2; // 初始动画持续时间

// 添加动画类名
box.classList.add('animation');

// 更新动画持续时间
function updateAnimation() {
  box.style.animationDuration = `${animationDuration}s`;
}

// 更新动画持续时间的值
updateAnimation();

// 更新动画持续时间的事件处理程序
document.querySelector('button').addEventListener('click', function() {
  animationDuration = 4; // 更新动画持续时间
  updateAnimation(); // 更新动画
});

通过点击按钮来更新动画的持续时间，这样就可以实现在JS中控制动画的效果。