A React component for creating frame-based animations.

Demo

The following example will render contents in Frame one at a time every 500 ms.

import { Keyframes, Frame } from "react-keyframes";
function MyComponent() {
 return (
 <Keyframes>
 <Frame duration={500}>This</Frame>
 <Frame duration={500}>This is</Frame>
 <Frame duration={500}>
 This is <em>animated</em>.
 </Frame>
 </Keyframes>
 );
}

Firstly, install the package:

$ npm install --save react-keyframes

<Keyframes { component = 'span' } />

• Use import { Keyframes } from 'react-keyframes'
• The component prop specifies what component Keyframes renders as. You can pass the following:
  • a React Component (i.e. <Keyframes component={myComponent} />)
  • a React Fragment (i.e. <Keyframes component={React.Fragment} />)
  • an HTML tag represented as a string (i.e. <Keyframes component='div' />)
  • If nothing is passed, it defaults to "span"
• Any additional, user-defined properties will become properties of the rendered component.
• It must have only Frame as children.
• Example:

import { Component } from 'react';
import { Keyframes, Frame } from 'react-keyframes';
class extends Component {
 render () {
 return <Keyframes component="pre" delay={300} className="animation-test">
 <Frame>foo</Frame>
 <Frame>bar</Frame>
 </Keyframes>;
 }
}

<Frame { duration = 0 } />

• Use import { Frame } from 'react-keyframes'
• 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:

import { Component } from 'react';
import { Keyframes, Frame } from 'react-keyframes';
class extends Component {
 render () {
 return <Keyframes>
 <Frame duration={100}>foo</Frame>
 <Frame duration={200}>bar</Frame>
 </Keyframes>;
 }
}

• Run npm run build to transpile the source code
• Before submitting a PR, please run npm run test
• Please be welcoming

Naoyuki Kanezawa (@nkzawa) - Vercel