它必须是一个关键帧动画吗？通常你会使用CSS transition属性来处理这种由JavaScript驱动的动画，就像这样：

var width = 50;

document.getElementById('button').addEventListener('click', () => {
  width += 50;
  document.getElementById('box').style.width = `${width}px`;
});

#box {
  background: red;
  height: 50px;
  width: 50px;
  transition: width .5s;
  margin-bottom: 1em;
}

<div id="box"></div>

<button id="button">Change Width</button>

如果你有一个更通用的动画（不能只做一个过渡），那么你可以使用JS来设置一个CSS变量。
以问题中的例子为例，将100%替换为变量：

@keyframes test {
  100% {
    width: var(--bg);
  }
}

你会得到这样的Javascript：

thediv.style.setProperty('--bg', '60px');

@JohnUleis已经回答正确了。我太晚了。但我只是为了好玩而添加了一个解决方案。名为：罗马有多远？;- ）
干杯

let root = document.documentElement;
const div = document.querySelector('div');
root.addEventListener("mousemove", e => {
  div.style.setProperty('--width', e.clientX + "px");
  div.innerHTML = e.clientX + ' km';
});

:root {
  --width: 100%; 
}

div {
  background: hotpink;
  width: var(--width);
  text-align: center;
  color: white;
}

<div>how far is rom?</div>