Dynamicaly animate elements css

So, I'm coding a roulette that spins sideways (right to left) and I want to know if there is any way I can dynamically use @keyframes, so I can use the translateX() with values according to the round result (The Roulette is in a background image). E.g: The round result is 5. The client receives the result from the server and the roulette translates X pixels to stop in the corresponding number.

Here is the roulette code:

import React, { useState, useEffect } from "react";
import { socket } from "../../App.js";

import "./roulette.css";

export default class Roulette extends React.Component {
  constructor(props) {
    super(props);
    this.socket = socket;
    this.roulette = React.createRef();
    this.state = {
      result: null,
    };
  }

  componentDidMount() {
    this.setState({
      backgroundPositionX: (this.roulette.current.offsetWidth - 78) / 2
    });
    this.socket.on("roulette.roll", position => {
      //TODO: Retrieve from the server how much pixels should be translated  
});
  }

  render() {
    return (
      <div className="main-r flex items-center justify-center">
        <div ref={this.roulette} className="roulette relative">
          <div
            style={{backgroundPosition: this.state.backgroundPositionX + "px" + "0"}
            className="roulette-bg h-full w-full" //The roulette background image, that is suposed to translate when the result is give is in this div
          ></div>
          <div className="roulette-marker absolute"></div>
        </div>
      </div>
    );
  }
}