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 --save How 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 |
