morpa / animations-on-styled-components

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