<AnimateKeyframes />

<AnimateKeyframes /> is implemented according to CSS animation specification. It's best to use for infinite animation, or animation which can be paused and resumed.

Example:

The following example will animate the component to move at X coordinate 3 times.

import React from 'react';
import { AnimateKeyframes }  from 'react-simple-animate';
import YourComponent from './YourComponent';

export default ({ play }) => (
  <AnimateKeyframes 
    play 
    delay={1}
    duration={10}
    iterationCount={3}
    direction="alternate"
    keyframes={[
      'transform: translateY(0)',
      'transform: translateY(10px)',
    ]} 
  >
    <YourComponent />
  </AnimateKeyframes>
)};

Props

• play: boolean = false required

  Defaults to false, set to true to start the animation, if set play as true as default prop, then the animation will play right after componentDidMount

• pause: boolean = false

  An animation is running or paused: animation-play-state

• keyframes: Array<string> | Array<Object> required

  Array of styles in string.

  <AnimateKeyframes 
    play 
    keyframes={['opacity: 0', 'opacity: 1']} // same as CSS @keyframes { 0% { ... } 100% { ... }}
  />
    <Component />
  </AnimateKeyframes>
  

  Array of Object with key pair of percentage and style.

  <AnimateKeyframes 
    play 
    keyframes={[
      { 0: 'opacity: 0' }, // 0%
      { 50: 'opacity: 0.5' }, // 50%
      { 100: 'opacity: 1' } // 100%
    ]}
  />
    <Component />
  </AnimateKeyframes>
  

• duration: number = 0.3

  How long the animation takes in seconds.

• delay: number

  How much delay should apply before animation starts: animation-delay

• iterationCount: string | number = 'none'

  Whether an animation should play forwards, backwards, or alternating back and forth: animation-direction

• direction: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse' = 'normal'

  Animation applies styles to target before and after execution: animation-play-state

• fillMode: 'none' | 'forwards' | 'backwards' | 'both' = 'none'

  Animation applies styles to target before and after execution: animation-play-state

• render: Function

  This is a Render props function, which is useful for render animation component without any div or span wrapper.

  <AnimateKeyframes 
    play 
    keyframes={['opacity: 0', 'opacity: 1']} // same as CSS @keyframes { 0% { ... } 100% { ... }}
    render={({ style }) => (
      <Component style={ style } />
    )} 
  />

• easeType: string = 'linear'

  Easing type refer to http://easings.net/

• sequenceIndex: number

  This props is used by <AnimationGroup/>, which provides unique array index to associate with <AnimationGroup/> sequences.

  Learn Animate Group
• sequenceId: string | number

  This props is used by <AnimationGroup/>, which provides unique id to associate with <AnimationGroup/> sequences.

  Learn Animate Group
• overlay: number

  This props is used by <AnimationGroup/>, When animation need to play ahead, which overlay on top of the previous animation by seconds.

  Learn Animate Group