animate-css-styled-components
simple port of animate css for styled-components
instalation
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';
here.
See how import specifics animationsNow, this animation is a component and you can encompassing the desired content within the component.
Example:
<Wobble ="0.8s" ="1s"> <Card> card content... </Card> </Wobble>
Props
- 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 Flash Bounce from 'animate-css-styled-components'; <Animate = ="0.8s" ="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 = = => <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.
Examples - Storybook
See all examples here
How to create custom styled animations
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 = ` animation-name: ; `; //export your custom styled animation ;
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!