title: Smoothly animate a div as its position changes
body: <p>I have an absolutely positioned div:</p>
  
  <pre><code>class MyDiv extends React.Component {
    state = {
      stepCount: 0
    };
  
    componentDidMount(){
      setInterval(() =&gt; {
        this.setState({ stepCount: this.state.stepCount + 1 })
      }, 1000);
    }
  
    render(){
      return (&lt;div style={{ left: this.state.stepCount * 10 + "%" }} /&gt;);
    }
  }
  
  CSS
  div { transition: 1s linear; }
  </code></pre>
  
  <p>Every second, I translate the div left by 10%. 
  I want the transitions to look smooth, but there is a slight stutter. </p>
  
  <p>Example:
  <a href="https://codepen.io/anon/pen/QoNGbQ" rel="nofollow noreferrer">https://codepen.io/anon/pen/QoNGbQ</a></p>