Animate Components

Animate Components is a small library that provides different elemental components for doing animations in React. Its flexible and very simple to use.

Example

import React, { Component } from 'react'; import { Bounce } from 'animate-components'; class App extends Component { render () { return ( <div> <Bounce> <h1>Hello World</h1> </Bounce> </div> ); } } 

You can then pass various props to the component Bounce like,

1. duration
2. timingFunction
3. delay
4. direction
5. iterations
6. backfaceVisible
7. fillMode

How it works ?

Basically all the animation components are wrapped in a high order function which renders a <span> element with the styles derived from the props. It covers all the abstraction for composing an animation so that you don't have to worry about the @keyframes rule. Just add the properties to an animation and that's it.
View on GitHub.