https://github.com/dielduarte/animate-css-styled-components

simple port of animate css for styled-components
https://github.com/dielduarte/animate-css-styled-components

animatecss react react-component styled-components

Last synced: 2 days ago
JSON representation

simple port of animate css for styled-components

• Host: GitHub
• URL: https://github.com/dielduarte/animate-css-styled-components
• Owner: dielduarte
• Created: 2017-04-15T20:27:07.000Z (almost 8 years ago)
• Default Branch: main
• Last Pushed: 2022-12-08T18:19:56.000Z (about 2 years ago)
• Last Synced: 2025-01-27T23:14:00.368Z (10 days ago)
• Topics: animatecss, react, react-component, styled-components
• Language: HTML
• Homepage: https://dielduarte.github.io/animate-css-styled-components/
• Size: 15.1 MB
• Stars: 190
• Watchers: 4
• Forks: 8
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# animate-css-styled-components

simple port of animate css for styled-components

[![Build Status](https://travis-ci.org/dielduarte/animate-css-styled-components.svg?branch=master)](https://travis-ci.org/dielduarte/animate-css-styled-components)

----------

## instalation

install animate-css-styled-components

```

[sudo] npm i --save animate-css-styled-components

```

## How to use

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

```jsx

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

```

###### See how import specifics animations [here](https://github.com/dielduarte/animate-css-styled-components/tree/master/docs/specific-animations).

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

Example:

```jsx

  

    

      card content...

    

  

```

## Props

 - 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`

## Animate - HOC

For convenience you can use Animate HOC to use animations stacked, you could pass a unique component to `Animation` prop or an array of animations, example:

```jsx

  import Animate, {

    Flash,

    Bounce

  } from 'animate-css-styled-components';

  

    

      card content...

    

  

```

In this example that you could see [here](https://dielduarte.github.io/animate-css-styled-components/?selectedKind=Animate%20%28HOC%29&selectedStory=Multiple%20Animations&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel), the Bounce Animation will run after when Flash animation is finished, respecting the duration time + delay time, duration and delay are same for all animations, but you could pass diferents values to each animation prop, look:

```jsx

  import Animate, {

    Flash,

    Bounce,

    FadeOut,

    FadeIn

  } from 'animate-css-styled-components';

  

    

      card content...

    

  

```

See this example [here](https://dielduarte.github.io/animate-css-styled-components/?selectedKind=Animate%20%28HOC%29&selectedStory=Multiple%20Animations%20with%20diferent%20times%20and%20delays&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel)

Don't forget, you coul pass any [animations props](https://github.com/dielduarte/animate-css-styled-components#props) as single string if the value are same for all animations stacked or an array of values.

## Examples - Storybook

See all examples [here](https://dielduarte.github.io/animate-css-styled-components/)

## How to create custom styled animations

You can import BaseAnimation component and create your custom animation

Example:

```jsx

  import { BaseAnimation } from 'animate-css-styled-components';

  //create your custom animation

  const SlideOutDownAnimation = keyframes`

    from {

      transform: translate3d(0, 0, 0);

    }

    to {

      visibility: hidden;

      transform: translate3d(0, 100%, 0);

    }

  `;

  //extend BaseAnimation component and create

  //your custom styled animation

  const SlideOutDown = styled(BaseAnimation)`

    animation-name: ${SlideOutDownAnimation};

  `;

  //export your custom styled animation  

  export default SlideOutDown;

```

now your animation is a styled-component and you can use this like any other styled-component,

passing the all BaseAnimation [props](https://github.com/dielduarte/animate-css-styled-components#props).

Made with love and styled-components!