styled-animation

4 months after

Styled Animation

Handle animations with style :sunglasses:.

License: MIT npm version npm downloads Known Vulnerabilities

NPM NPM

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"));

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.

Related Repositories

GuillotineMenu-Android

GuillotineMenu-Android

Neat library, that provides a simple way to implement guillotine-styled animatio ...

smoke.js

smoke.js

framework-agnostic styled alert system for javascript ...

Interactive-animation

Interactive-animation

Collect android animation ...

GSBookShelf

GSBookShelf

An iBooks-styled book shelf for iOS (Animation of drag & drop, insert, remove... ...

cssobj

cssobj

Runtime CSS manager, Turn CSS into dynamic JS module, Stylesheet CRUD (Create, R ...