Styled Animation 
Handle animations with style
Installation
YARN
yarn add @blackbox-vision/styled-animationNPM
npm install --save @blackbox-vision/styled-animationUsage
Styled-animation supports all the animations provided by react-animations
The usage is really simple:
import { Animation } from '@blackbox-vision/styled-animation';
import React from 'react';
import ReactDOM from 'react-dom';
const Example = () => (
<Animation name="fadeOutDown" duration="2s" timing="ease-out">
Hey!, i'm animated!
</Animation>
);
ReactDOM.render(<Example />, document.getElementById('root'));Also is possible to merge multiple animations, separating each animation name by a space:
import { Animation } from '@blackbox-vision/styled-animation';
import React from 'react';
import ReactDOM from 'react-dom';
const Example = () => (
<Animation name="shake bounce">Hey!, i'm mixed!</Animation>
);
ReactDOM.render(<Example />, document.getElementById('root'));Props
Animation component use the following props:
| Properties | Types | Default Value | Description |
|---|---|---|---|
| name | string | none | Name or names of the animations to start. |
| duration | string | none | Indicates the duration of the Animation. |
| timing | string | none | Indicates the timing of the animation. |
| fillMode | string | none | Indicates the animation-fill-mode value. |
| onStart | Function | none | Callback called when the animation keyframes start. |
| onEnd | Function | none | Callback called when the animation keyframes finish. |
Issues
Please, open an issue following one of the issues templates. We will do our best to fix them.
Contributing
If you want to contribute to this project see contributing for more information.
License
Distributed under the MIT license. See LICENSE for more information.