animations-on-styled-components

1.0.0 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i animations-on-styled-components

Weekly Downloads

13

Version

1.0.0

License

MIT

Unpacked Size

7.43 MB

Total Files

784

Last publish

Collaborators

  • morpa