data.js

export default [
 {title: 'red', message: 'I\'m red', color: 'red'}, 
 {title: 'blue', message: 'I\'m blue', color: 'blue'}, 
 {title: 'green', message: 'I\'m green', color: 'green'} 
]

react-animation.jsx

import cx from 'classnames'
import data from './data'

class Whateves extends Component {
  constructor(props) {
    super(props)
    const [first] = data
    this.state = {
      hide: true
      ...data
    }
    this.next = 1
  }
  
  componentDidMount() {
    this.setState(
      Object.assign({}, this.state, hide: false)  
    )
  }
  
  handleClick(e) {
    e.preventDefault()
    
    this.next = this.next === data.length ? 0 : this.next + 1
    
    this.setState(
      Object.assign({}, this.state, data[this.next])  
    )
  }
  
  render() {
    const {color, message, title, hide} = this.state
    
    const classes = cx('anim-container', color, {
      hide,
      show: !hide
    })
    
    return (
      <div className={classes}>
        <h1>this.state.title</h1>
        <p>this.state.message</p>
        <button type="text" onClick={::this.handleClick}>Click Me</button>
      </div>
    )
  }
}

styles.scss

.anim-container {
  transition: all linear 0.3s;
}

.hide {
  opacity: 0;
}

.show {
  opacity: 1;
}

.red {
  background: //dark red
  h1 {
    background: //light red
  }
}

.blue {
    background: //dark blue
  h1 {
    background: //light blue
  }
}

.green {
      background: //dark green
  h1 {
    background: //light green
  }
}