title: I am trying to animate an object with css in react and change the animation (timing) dynamically, how can I set the style after animation end?
body: <p>I am trying to make a hot air balloon styled button that floats (translates over x and y space). Currently I am using CSS variable to set animation properties but I can only do this once or else I get an error saying <br />
  &quot;TypeError: Cannot assign to read only property '--animation-time' of object '#'&quot; <br />
  How do I work around this to be able to set new random properties for where the animation starts, ends, and how long it lasts?
  Currently I have this:</p>
  <pre><code>class HotAir extends React.Component{
    constructor(props){  
      super(props);  
      this.state = {
        link: props.link,
        cls: props.cls,
        img: props.img,
        text: props.text,
      }  
    }  
  
    render(){
      var cssProperties = {};
      cssProperties['--animation-time'] = Math.random()*10 + 's';
      console.log(cssProperties);
  
      
      return(
        &lt;div className=&quot;balloon&quot; style={cssProperties} onAnimationEnd={()=&gt; cssProperties['--animation-time'] = '60s'}&gt;
          &lt;Link to={this.state.link}&gt;&lt;button className=&quot;balloonbutt&quot;&gt;
            &lt;img src={this.state.img} alt=&quot;&quot;&gt;&lt;/img&gt;
            &lt;div className=&quot;balloontext&quot;&gt;{this.state.text}&lt;/div&gt;&lt;/button&gt;
          &lt;/Link&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>and this is my relevant css</p>
  <pre><code>.balloon{
      --animation-time: 60s;
      --x-float-start: 10vw;
      --y-float-start: 10vh;
      --x-float-end: 20vw;
      --y-float-end: 20vh;
      position: relative;
    text-align: center;
    color: white;
      animation: float var(--animation-time) linear;
  }
  @keyframes float{
      0%{
          left: var(--x-float-start);
          top: var(--y-float-start);
      }
      100%{
          left: var(--x-float-end);
          top: var(--y-float-end);
      }
  }
  </code></pre>