Awesome Open Source
Awesome Open Source


simple port of animate css for styled-components

Build Status


install animate-css-styled-components

[sudo] npm i --save animate-css-styled-components

How to use

import animate-css-styled-components module calling global animations

import { Wobble, FadeIn, FadeOut } from 'animate-css-styled-components';
See how import specifics animations here.

Now, this animation is a component and you can encompassing the desired content within the component.


  <Wobble duration="0.8s" delay="1s">
      card content...


  • duration
    • prop for represent animation-duration
    • default 1s
  • delay
    • prop for represent animation-delay
    • default 0s
  • timingFunction
    • prop for represent animation-timing-function
    • default ease
  • iterationCount
    • prop for represent animation-iteration-count
    • default 1
  • direction
    • prop for represent animation-direction
    • default normal
  • fillMode
    • prop for represent animation-fill-mode
    • default both
  • playState
    • prop for represent animation-play-state
    • default running
  • display
    • prop for represent display css property
    • default block

Animate - HOC

For convenience you can use Animate HOC to use animations stacked, you could pass a unique component to Animation prop or an array of animations, example:

  import Animate, {
  } from 'animate-css-styled-components';

    Animation={[Flash, Bounce]} 
      card content...

In this example that you could see here, the Bounce Animation will run after when Flash animation is finished, respecting the duration time + delay time, duration and delay are same for all animations, but you could pass diferents values to each animation prop, look:

  import Animate, {
  } from 'animate-css-styled-components';

    Animation={[Flash, Bounce, FadeOut, FadeIn]}
    duration={["0.8s", "3s", "2s", "0.4s"]}
    delay={["0.2s", "0.1s", "0.5s", "1s"]}>
      card content...

See this example here

Don't forget, you coul pass any animations props as single string if the value are same for all animations stacked or an array of values.

Examples - Storybook

See all examples here

How to create custom styled animations

You can import BaseAnimation component and create your custom animation


  import { BaseAnimation } from 'animate-css-styled-components';

  //create your custom animation
  const SlideOutDownAnimation = keyframes`
    from {
      transform: translate3d(0, 0, 0);

    to {
      visibility: hidden;
      transform: translate3d(0, 100%, 0);

  //extend BaseAnimation component and create
  //your custom styled animation
  const SlideOutDown = styled(BaseAnimation)`
    animation-name: ${SlideOutDownAnimation};

  //export your custom styled animation  
  export default SlideOutDown;

now your animation is a styled-component and you can use this like any other styled-component, passing the all BaseAnimation props.

Made with love and styled-components!

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
html (10,991
react (5,363
styled-components (234
react-component (201