React Keyframes


A React component for creating frame-based animations.

!Demo

Example

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')
);
`

Documentation

$3

`js
$ npm install react-keyframes --save
`

$3

#### Keyframes


- Use import { Keyframes } from 'react-keyframes' or require('react-keyframes').Keyframes.
- The component prop specifies what component Keyframes renders as.
- The delay prop specifies when the animation should start (millisecond).
- The loop prop specifies the number of times an animation cycle should be played. Set true to repeat forever.
- The onStart function is invoked upon animation start
- The onEnd function is invoked upon animation end
- Any additional, user-defined properties will become properties of the rendered component.
- It must have only Frame 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.
- The duration prop specifies the length of time that a frame should show (millisecond).
- You have to put Frame 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
;
}
}
`

$3

- Run gulp help to see available tasks.
- Before submitting a PR, please run gulp lint and npm test.
- We use standard` + semicolons.
- Please be welcoming.

Credits

- Copyright © 2016 Zeit, Inc and project authors.
- Licensed under MIT.
- ▲