A React component for creating frame-based animations.

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