AnimateStyled

!MIT

small contribution for those who work with react and styled-components

AnimateStyled is just a library based on the great work done by the people of animate.css led to the stack of
react and styled-components.

Installation

via yarn, just follow these simple commands:

``bash
$ yarn add animate-styled
`
or via npm:

`bash
$ npm install animate-styled --save
`

Basic use

import in your file js

`javascript
...
import { AnimateStyled } from "animate-styled"
...
render(){
return(



Mi contenido

/ children is required /

)
}
`

Properties

| Name props | Default | Type | Values |
|-----------------|---------|-------|----------|
| name | shake | String | names of animations |
| duration | 2s | String | 1s, 300ms... |
| timingFunction | linear | String | ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end |
| delay | 0s | String | 1s, 300ms... |
| iterationCount | infinite | String, Number | 0 , 1 , 3 , infinite |
| direction | normal | String | normal, reverse, alternate, alternate-reverse |
| fillMode | none | String | none, forwards, backwards, both|
| playState | running | String | running, paused |
| transformOrigin | center | String | center, 50%, top bottom, 10% 80% ...|
| backfaceVisibility | hidden | String | hidden, visible |
| opacity | 0 | Number | 0 -> 1 |
| style | undefined | React.CSSProperties | |
| children | Hello World | ReactNode |

Names of animations

For test all animation click here

---

| Attention Seekers | Specials | Flippers | LightSpeed |
|--------------------|----------|----------|------------|
| bounce | hinge | flip | lightSpeedInLeft |
| flash | jackInTheBox | flipInX | lightSpeedInRight |
| headShake | rollIn | flipInY | lightSpeedOutLeft |
| heartBeat | rollOut | flipOutX | lightSpeedOutRight |
| jello | | flipOutY |
| pulse |
| rubberBand |
| shake |
| shakeX |
| shakeY |
| swing |
| tada |
| wobble |

---

| BackEntrances | BackExits | BouncingEntrances | BouncingExits |
|---------------|-----------|-------------------|---------------|
| backInDown | backOutDown | bounceIn | bounceOut |
| backInLeft | backOutLeft | bounceInDown | bounceOutDown |
| backInRight | backOutRight | bounceInLeft | bounceOutLeft |
| backInUp | backOutUp | bounceInRight | bounceOutRight |
| | | bounceInUp | bounceOutUp |

---

| FadingEntrances | FadingExits | RotatingEntrances | RotatingExits |
|-------------------|---------------|---------------------|-----------------|
| fadeIn | fadeOut | rotateIn | rotateOut
| fadeInBottomLeft | fadeOutBottomLeft | rotateInDownLeft | rotateOutDownLeft
| fadeInBottomRight | fadeOutBottomRight | rotateInDownRight | rotateOutDownRight
| fadeInDown | fadeOutDown | rotateInUpLeft | rotateOutUpLeft
| fadeInDownBig | fadeOutDownBig | rotateInUpRight | rotateOutUpRight
| fadeInLeft | fadeOutLeft
| fadeInLeftBig | fadeOutLeftBig
| fadeInRight | fadeOutRight
| fadeInRightBig | fadeOutRightBig
| fadeInTopLeft | fadeOutTopLeft
| fadeInTopRight | fadeOutTopRight
| fadeInUp | fadeOutUp
| fadeInUpBig | fadeOutUpBig

---

| SlidingEntrances | SlidingExits | ZoomingEntrances | ZoomingExits |
|--------------------|----------------|--------------------|----------------|
| slideInDown | slideOutDown | zoomIn | zoomOut
| slideInLeft | slideOutLeft | zoomInDown | zoomOutDown
| slideInRight | slideOutRight | zoomInLeft | zoomOutLeft
| slideInUp | slideOutUp | zoomInRight | zoomOutRight
| | | zoomInUp | zoomOutUp

---

Import multiple animations


`javascript
import { AnimateStyled } from "animate-styled";
...
render(){
return(

My Content

My Content

)
}
`

Using All Properties

`javascript

name="flip"
duration="600ms"
timingFunction="ease-in-out"
delay="200ms"
iterationCount={3}
direction="alternate"
fillMode="forwards"
playState="running"
transformOrigin="center top"
backfaceVisibility="visible"
>
{children}

`


Other uses


Nesting
`javascript

name="zoomOutUp"
iterationCount="infinite"
timingFunction="ease-in">

Mundo

``

License

AnimateStyled is licensed under the MIT license. (http://opensource.org/licenses/MIT)

[npm-badge]: https://img.shields.io/npm/v/animate-styled.png?style=flat-square
[npm]: https://www.npmjs.org/package/animate-styled