# react-animations

> A collection of animations for inline styles

Latest version **1.0.0** (published 2017-10-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-animations
pnpm add react-animations
yarn add react-animations
bun add react-animations
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-10-31 |
| First published | 2016-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-animations) |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Brandon Dail |
| Maintainers | aweary |
| Keywords | react, animation, radium, css-in-js |

## Links

- npm: https://www.npmjs.com/package/react-animations
- npm.io page: https://npm.io/package/react-animations

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2017-10-31
- 0.0.1 (beta) — 2016-09-24
- 0.1.0 — 2016-09-26
- 0.0.2 — 2016-09-26

## README

# react-animations


A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite. React-animations implements all animations from [animate.css](https://daneden.github.io/animate.css/).

[Check out the interactive demo](http://react-animations.herokuapp.com/).

### Usage

You can import each animation directly from the main package

```js
import { fadeIn } from 'react-animations'
```

or you can import a specific animation directly

```js
import fadeIn from 'react-animations/lib/fade-in'
```


### Usage with Radium

```js
import React from 'react';
import { bounce } from 'react-animations';
import Radium, {StyleRoot} from 'radium';

const styles = {
  bounce: {
    animation: 'x 1s',
    animationName: Radium.keyframes(bounce, 'bounce')
  }
}

class Test extends React.Component {
  render() {
    <StyleRoot>
      <div className="test" style={styles.bounce}>
      </div>
    </StyleRoot>
  }
}

```

### Usage with Aphrodite

```js
import { bounce } from 'react-animations';
import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
  bounce: {
    animationName: bounce,
    animationDuration: '1s'
  }
})
```

### Usage with JSS

```js
import { bounce } from 'react-animations';
import jss from 'jss'
import preset from 'jss-preset-default'

jss.setup(preset())

const {classes} = jss.createStyleSheet({
  '@keyframes bounce': bounce,
  bounce: {
    animationName: 'bounce',
    animationDuration: '1s',
  },
}).attach()
```

### Usage with `styled-components`

```js
import styled, { keyframes } from 'styled-components';
import { bounce } from 'react-animations';

const bounceAnimation = keyframes`${bounce}`;

const BouncyDiv = styled.div`
  animation: 1s ${bounceAnimation};
`;
```

## Animations

Below is a list of all available animations

`bouceOut`

`bounce`

`bounceIn`

`bounceInDown`

`bounceInLeft`

`bounceInRight`

`bounceInUp`

`bounceOutDown`

`bounceOutLeft`

`bounceOutRight`

`bounceOutUp`

`fadeIn`

`fadeInDown`

`fadeInDownBig`

`fadeInLeft`

`fadeInLeftBig`

`fadeInRight`

`fadeInRightBig`

`fadeInUp`

`fadeInUpBig`

`fadeOut`

`fadeOutDown`

`fadeOutDownBig`

`fadeOutLeft`

`fadeOutLeftBig`

`fadeOutRight`

`fadeOutRightBig`

`fadeOutUp`

`fadeOutUpBig`

`flash`

`flip`

`flipInX`

`flipInY`

`flipOutX`

`flipOutY`

`headShake`

`hinge`

`jello`

`lightSpeedIn`

`lightSpeedOut`

`pulse`

`rollIn`

`rollOut`

`rotateIn`

`rotateInDownLeft`

`rotateInDownRight`

`rotateInUpLeft`

`rotateInUpRight`

`rotateOut`

`rotateOutDownLeft`

`rotateOutDownRight`

`rotateOutUpLeft`

`rotateOutUpRight`

`rubberBand`

`shake`

`slideInDown`

`slideInLeft`

`slideInRight`

`slideInUp`

`slideOutDown`

`slideOutLeft`

`slideOutRight`

`slideOutUp`

`swing`

`tada`

`wobble`

`zoomIn`

`zoomInDown`

`zoomInLeft`

`zoomInRight`

`zoomInUp`

`zoomOut`

`zoomOutDown`

`zoomOutLeft`

`zoomOutRight`

`zoomOutUp`


## Merge

react-animations also exports a `merge` function that takes two animations and returns a new animation that combines the transforms from both. This is experimental and wont work (well) with animations that have conflicting transforms, such as `fadeIn` and `fadeOut`. The merged animation can be used just like any of the imported animations.


```js

import { merge, tada, flip } from 'react-animations';
const tadaFlip = merge(tada, flip);
```

---
_Source: https://npm.io/package/react-animations · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._