Props

  1. play: boolean = false required
  2. pause: boolean = false
  3. keyframes: Array<string> | Array<Object> required
  4. duration: number = 0.3
  5. delay: number
  6. iterationCount: string | number = 'none'
  7. direction: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse' = 'normal'
  8. fillMode: 'none' | 'forwards' | 'backwards' | 'both' = 'none'
  9. render: Function
  10. easeType: string = 'linear'
  11. Following props are used by <AnimateGroup />

  12. sequenceIndex: number
  13. sequenceId: string | number
  14. overlay: number

<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="alternative"
    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.

  • sequenceId: string | number

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

  • overlay: number

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