Using react-animations library

In this recipe, we are going to learn how to use the library react-animations.

Getting ready

For this recipe, we need to install the following packages:

npm install react-animations radium

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...