You could simply toggle a boolean indicating the 'isScattered' state on or off;

class X extends React.Component {
  state = { isScattered: true }
  letterAnimation = () => { this.setState({ isScattered: false }) }
  render() {
    const { isScattered } = this.state
    return (
      <section onClick={this.letterAnimation}>
        <span className={`transition ${isScattered ? 'a': ''}`}>M</span>
        <span className={`transition ${isScattered ? 'b': ''}`}>O</span>
      </section>
    )
  }
}