simple port of animate css for styled-components

Build Status

install animate-css-styled-components

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

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

import { Wobble, FadeIn, FadeOut } from 'animate-css-styled-components';

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

Example:

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

• 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

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, {
 Flash,
 Bounce
 } from 'animate-css-styled-components';
 <Animate 
 Animation={[Flash, Bounce]} 
 duration="0.8s" 
 delay="0.2s">
 <Card>
 card content...
 </Card>
 </Animate>

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, {
 Flash,
 Bounce,
 FadeOut,
 FadeIn
 } from 'animate-css-styled-components';
 <Animate 
 Animation={[Flash, Bounce, FadeOut, FadeIn]}
 duration={["0.8s", "3s", "2s", "0.4s"]}
 delay={["0.2s", "0.1s", "0.5s", "1s"]}>
 <Card>
 card content...
 </Card>
 </Animate>

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.

See all examples here

You can import BaseAnimation component and create your custom animation

Example:

 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!