port of animate.css for styled-components
npm install animate-css-styled-componentssimple port of animate css for styled-components
----------
install animate-css-styled-components
``
[sudo] npm i --save animate-css-styled-components
import animate-css-styled-components module calling global animations
`jsx`
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.
Example:
`jsx`
card content...
- duration
- prop for represent animation-duration
- default 1s
- delay
- prop for represent animation-delay
- default
- timingFunction
- prop for represent animation-timing-function
- default
- iterationCount
- prop for represent animation-iteration-count
- default
- direction
- prop for represent animation-direction
- default
- fillMode
- prop for represent animation-fill-mode
- default
- playState
- prop for represent animation-play-state
- default
- display
- prop for represent display css property
- default
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:
`jsx
import Animate, {
Flash,
Bounce
} from 'animate-css-styled-components';
duration="0.8s"
delay="0.2s">
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:
`jsx
import Animate, {
Flash,
Bounce,
FadeOut,
FadeIn
} from 'animate-css-styled-components';
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.
See all examples here
You can import BaseAnimation component and create your custom animation
Example:
`jsx
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!