animations-on-styled-components v1.0.0

animations-on-styled-components

A simple port of animate css for styled-components

Based on the work of (https://github.com/dielduarte/animate-css-styled-components/)

Base on lib animate-css-styled-components

Instalation

 npm i styled-components-animations
 or
 yarn add styled-components-animations

How to use

import animate-css-styled-components module calling global animations

import { Wobble, FadeIn, FadeOut } from 'styled-components-animations';

Now, this animation is a component and you can encompassing the desired content within the component.

Example:

  <Wobble duration="0.8s" delay="1s">
    <Card>
      card content...
    </Card>
  </Wobble>

API

• duration - prop for represent animation-duration - default 1s
• delay - prop for represent animation-delay - default 0s
• timingFunction - prop for represent animation-timing-function - default ease
• iterationCount - prop for represent animation-iteration-count - default 1
• direction - prop for represent animation-direction - default normal
• fillMode - prop for represent animation-fill-mode - default both
• playState - prop for represent animation-play-state - default running
• display - prop for represent display css property - default block