react-element-transitions

A custom component that can be used to add pre-defined transitions or animations with any React Element using CSS Keyframes. This package also gives you the access to overwrite the animations properties for customized transitions with huge list of animations .

Usage

You can import each animation directly from the main package

import { Transit } from 'react-element-transitions'

Using Animations

<Transit name="BOUNCE" interationCount={10} duration={'0.5'} timing={'linear'} >
  <button>Animated Button</button>
</Transit>

Transit - props

| Attribute | Type | Default | Description | Example | | ------------- |:-------------:|:-------------:|:-------------:| :-------------:| | name | string | NA | Name of the animation type | Check Animation list | duration | string | "1" | Duration of the single animation frame | "1" to "1000" | timing | string | "ease-in-out"| Timing function of animation |linear ,ease ,ease-in, ease-out, ease-in-out | interationCount | number | 1 | Number of times animation will repeat | 1 to 1000 | onlyHover | boolean | false | Apply animation on hover only | false OR true

Animations List

Below are the list for available animations

WIGGLE

FADE

BOUNCE

SLIDE-RIGHT

SLIDE-BOTTOM

SLIDE-LEFT

SLIDE-TOP

ROTATE-LEFT

ROTATE-RIGHT