如何使用react-motion进行动画左右运动

Question

点击按钮后，我想让div从一边到另一边三次。我可以使用下面的代码完成它。 jsfiddle here

var Thing = React.createClass({
  getInitialState: function () {
    return {
      left: 0
    }
  },
  sideToSide: function(count = 1) {
    if (count <= 6) {
      this.setState({ left: this.state.left === 0 ? 45 : 0 })    
      setTimeout(() => {
        this.sideToSide(count + 1)
      }, 200)      
    }     
  },

  render: function() {
    return (
      <div>
        <Motion style={{ left: spring(this.state.left) }}>
          {(a) => (
            <div style={{ marginLeft: a.left }}>
              Moroni 10:3-5
            </div>
          )}
        </Motion>
        <button onClick={() => this.sideToSide()}>side to side</button>
      </div>
    );
  }
});

但是我想知道除了改变状态并将更改传递给<Motion/>之外，还是有更好/不同的方法来做反应动作。是否有一个选项，比如传递一系列样式，这些样式按照这样的顺序（或类似的东西）动画？

<Motion styles={[
  { marginLeft: '45px' },
  { marginLeft: '0px' },
  { marginLeft: '45px' },
  { marginLeft: '0px' },
  { marginLeft: '45px' },
  { marginLeft: '0px' }
]}>
 {...}
</Motion>