Styled Animation

Handle animations with style :sunglasses:.

Installation

YARN

yarn add styled-animation

NPM

npm install --save styled-animation

Usage

Styled-animation supports all the animations provided by react-animations

The usage is really simple:

import { Animation } from '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 '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

| Prop | Description | |---|---| | name: String | Name or names of the animations to start | | duration: String | Indicates the duration of the animation | | timing: String | Indicates the timing of the animation | | fillMode: String | Indicates the animation-fill-mode value | | onEnd: Function | Callback called when the animation keyframes finish |

Issues

If you found a bug, or you have an answer, or whatever. Please, open an issue. We will do our best to fix it.

Contributing

Of course, if you see something that you want to upgrade from this library, or a bug that needs to be solved, PRs are welcome!

License

Distributed under the MIT license. See LICENSE for more information.