Styled-animation NPM

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