[](https://travis-ci.org/zeit/react-keyframes) [](https://github.com/sindresorhus/xo)


A React component for creating frame-based animations.
!Demo
The following example will render contents in Frame one at a time every 500 ms.
``js
import { render } from 'react-dom';
import { Keyframes, Frame } from 'react-keyframes';
render(
This
This is
This is animated.
document.getElementById('container')
);
`
`js`
$ npm install react-keyframes --save
#### Keyframes
- Use import { Keyframes } from 'react-keyframes' or require('react-keyframes').Keyframes.component
- The prop specifies what component Keyframes renders as.delay
- The prop specifies when the animation should start (millisecond).loop
- The prop specifies the number of times an animation cycle should be played. Set true to repeat forever.onStart
- The function is invoked upon animation startonEnd
- The function is invoked upon animation endFrame
- Any additional, user-defined properties will become properties of the rendered component.
- It must have only as children.
- Example:
`js
import { Component } from 'react';
import { Keyframes, Frame } from 'react-keyframes';
class extends Component {
render () {
return
foo
bar
}
}
`
#### Frame
- Use import { Frame } from 'react-keyframes' or require('react-keyframes').Frame.duration
- The prop specifies the length of time that a frame should show (millisecond).Frame
- You have to put in the order you want them animated.
- Example:
`js
import { Component } from 'react';
import { Keyframes, Frame } from 'react-keyframes';
class extends Component {
render () {
return
foo
bar
}
}
`
- Run gulp help to see available tasks.gulp lint
- Before submitting a PR, please run and npm test.standard` + semicolons.
- We use
- Please be welcoming.
- Copyright © 2016 Zeit, Inc and project authors.
- Licensed under MIT.
- ▲