React Cookbook

How to do it...

Let's do some animation:

1. We need to use Radium to create our inline styles to use our animations from the react-animations package. First, let's create our component:

import React, { Component } from 'react';import { fadeIn } from 'react-animations';import Radium, { StyleRoot } from 'radium';const styles = {  fadeIn: {    animation: 'x 1s',    animationName: Radium.keyframes(fadeIn, 'fadeIn')  }};class Animations extends Component {  render() {    return (      <StyleRoot>        <div className="Animations" style={styles.fadeIn}>          <h1>This text will be animated</h1>        </div>      </StyleRoot>    );  }}export default Animations;

File: src/components/Animations/index.jsx

2. In this example, we are using the fadeIn animation. We need to import the animation we ...