simple 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
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>
1s
0s
ease
1
normal
both
running
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!