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.

Package detail

styled-animation

readme