https://github.com/micahfang/twc-animate

A TailwindCSS plugin provides a variety of commonly used animation effects.
https://github.com/micahfang/twc-animate

tailwind tailwindcss

Last synced: 26 days ago
JSON representation

A TailwindCSS plugin provides a variety of commonly used animation effects.

• Host: GitHub
• URL: https://github.com/micahfang/twc-animate
• Owner: MICAHFANG
• License: mit
• Created: 2023-04-14T07:01:50.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-04-19T02:53:18.000Z (over 1 year ago)
• Last Synced: 2024-09-30T10:01:21.943Z (about 1 month ago)
• Topics: tailwind, tailwindcss
• Language: JavaScript
• Homepage: https://micahfang.github.io/twc-animate/
• Size: 333 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @micahfang/twc-animate

![GitHub repo size](https://img.shields.io/github/repo-size/MICAHFANG/twc-animate?style=flat-square)

![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@micahfang/twc-animate?color=%236cb7ca&style=flat-square)

![npm](https://img.shields.io/npm/dm/@micahfang/twc-animate?color=%23604d9e&style=flat-square)

![NPM](https://img.shields.io/npm/l/@micahfang/twc-animate?style=flat-square)

![GitHub package.json version](https://img.shields.io/github/package-json/v/MICAHFANG/twc-animate?color=%2315293d&style=flat-square)

A TailwindCSS plugin provides a variety of commonly used animation effects.

[Examples](https://micahfang.github.io/twc-animate/)

## Table of Contents

- [@micahfang/twc-animate](#micahfangtwc-animate)

  - [Table of Contents](#table-of-contents)

  - [Install](#install)

  - [Usage](#usage)

    - [Animate duration times](#animate-duration-times)

    - [Animate repeat count](#animate-repeat-count)

    - [Shake animation](#shake-animation)

    - [Animate duration times](#animate-duration-times-1)

    - [Animate repeat count](#animate-repeat-count-1)

    - [Shake animation](#shake-animation-1)

  - [License](#license)

## Install

Before you use `@micahfang/twc-animate` you should check your

[tailwindcss](https://tailwindcss.com/docs) version is larger than 3.0.

```sh

pnpm add @micahfang/twc-animate -D

# or use yarn

yarn add @micahfang/twc-animate -D

# or use npm

npm install @micahfang/twc-animate -D

```

## Usage

Update your `tailwind.config.js`

```js

module.exports = {

  content: ['./src/**/*.{js,ts,jsx,tsx}'],

  plugins: [require('@micahfang/twc-animate')], // require the plugin,

}

```

See more [examples](https://micahfang.github.io/twc-animate/).

### Animate duration times

`ani-duration-[times]`

**example**

```jsx

const AniCount = () => (

  <>

    


    


    


    


  >

)

```


### Animate repeat count

`ani-count-[count]`

**example**

```jsx

const AniCount = () => (

  <>

    


    


    


    


  >

)

```


### Shake animation

If you want to shake an element, you can yse add `ani-shake` class to your

element.

**example**

```jsx

const ShakeEle = () => 


```


The `ani-shake` class will add an animation to the div. Because of `ani-count-2`

class This animation will repeat twice.

**Different types of shake**

- `ani-shake`: rotate animate

- `ani-shake-horizontal`: translate x

- `ani-shake-vertical`: translate y

See more [examples]('https://micahfang.github.io/twc-animate/').

### Animate duration times

`ani-duration-[times]`

**example**

```jsx

const AniCount = () => (

  <>

    


    


    


    


  >

)

```


### Animate repeat count

`ani-count-[count]`

**example**

```jsx

const AniCount = () => (

  <>

    


    


    


    


  >

)

```


### Shake animation

If you want to shake an element, you can yse add `ani-shake` class to your

element.

**example**

```jsx

const ShakeEle = () => 


```


The `ani-shake` class will add an animation to the div. Because of `ani-count-2`

class This animation will repeat twice.

**Different types of shake**

- `ani-shake`: rotate animate

- `ani-shake-horizontal`: translate x

- `ani-shake-vertical`: translate y

See more [examples](https://micahfang.github.io/twc-animate/).

## License

[MIT © Micah Fang.](../LICENSE)