styled-animation
styled-animation
npm i styled-animation
styled-animation

styled-animation

😎 Helper that implements react-animations for styled-components

by BlackBoxVision

1.0.8 (see all)License:MITTypeScript:Not Found
npm i styled-animation
Readme

Styled Animation

Handle animations with style 😎.

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

Props

PropDescription
name: StringName or names of the animations to start
duration: StringIndicates the duration of the animation
timing: StringIndicates the timing of the animation
fillMode: StringIndicates the animation-fill-mode value
onEnd: FunctionCallback 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.

Downloads/wk

3

GitHub Stars

21

LAST COMMIT

4yrs ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

0

OPEN PRs

3
VersionTagPublished
1.0.8
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate