React Keyframes

A React component for creating frame-based animations.

Example

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

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

Usage

Firstly, install the package:

$npminstall--savereact-keyframes

API

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';classextendsComponent{render(){return<Keyframescomponent="pre"delay={300}className="animation-test"><Frame>foo</Frame><Frame>bar</Frame></Keyframes>;}}

Frame

<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';classextendsComponent{render(){return<Keyframes><Frameduration={100}>foo</Frame><Frameduration={200}>bar</Frame></Keyframes>;}}

Contributing

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

Author

Naoyuki Kanezawa (@nkzawa) - Vercel