Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-keyframes with all npm packages installed. Try it out:

var reactKeyframes = require("react-keyframes")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-keyframes v0.2.3

Create frame-based animations in React

React Keyframes

Build Status XO code style

A React component for creating frame-based animations.



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

import { render } from 'react-dom';
import { Keyframes, Frame } from 'react-keyframes';

    <Frame duration={500}>This</Frame>
    <Frame duration={500}>This is</Frame>
    <Frame duration={500}>This is <em>animated</em>.</Frame>


Firstly, install the package:

$ npm install --save react-keyframes



<Keyframes { component = 'span', delay = 0, loop = 1, onStart, onEnd } />

  • 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:

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


<Frame { duration = 0 } />

  • 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:

    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>


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


Naoyuki Kanezawa (@nkzawa) - ▲ZEIT


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free