1.0.0 • Published 7 years ago
styled-animated v1.0.0
I was inspired by Animated.css
Live Demo
Actually, it doesn't make any difference with using css animations but composition is awesome, you can compose any animated elements maybe this can create a little difference.
Installation
npm install styled-animated styled-components --saveHow to use it
With Animated component
import Animated, { zoomIn } from 'styled-animated'
...
<Animated animationFunction={zoomIn}>
Styled-Animated
</Animated>
...Without Animated component
import { zoomIn } from 'styled-animated'
...
<Rectangle>
Styled-Animated
</Rectangle>
...
const Rectangle=styled.div`
width:200px;
height:200px;
background-color:red;
animation:${zoomIn} 1s ease-in;
`Animated Component Props
| props | default | explanation |
|---|---|---|
| animationFunction (Required) | - | Animation name. You can use any present effect like zoomIn, fadeIn, etc. |
| duration | 1 | Animation time |
| timingFunction | linear | You can use ease, linear, cubic-bezier |
| delay | 0 | A delay for the start of an animation. |
| iterationCount | finite | The number of times an animation should run. You use number or string like "finite" or "infinite" |
| direction | alternate | This is used to let animation run in reverse direction or alternate cycles |