@micahfang/twc-animate

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

Examples

Table of Contents

• @micahfang/twc-animate
  • Table of Contents
  • Install
  • Usage
    • Animate duration times
    • Animate repeat count
    • Shake animation
    • Animate duration times
    • Animate repeat count
    • Shake animation
  • License

Install

Before you use @micahfang/twc-animate you should check your tailwindcss version is larger than 3.0.

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

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  plugins: [require('@micahfang/twc-animate')], // require the plugin,
}

See more examples.

Animate duration times

ani-duration-[times]

example

const AniCount = () => (
  <>
    <div className="ani-shake ani-duration-200"></div>
    <div className="ani-shake ani-duration-300"></div>
    <div className="ani-shake ani-duration-[100ms]"></div>
    <div className="ani-shake ani-duration-1000"></div>
  </>
)

Animate repeat count

ani-count-[count]

example

const AniCount = () => (
  <>
    <div className="ani-shake ani-count-1"></div>
    <div className="ani-shake ani-count-2"></div>
    <div className="ani-shake ani-count-[100]"></div>
    <div className="ani-shake ani-count-infinite"></div>
  </>
)

Shake animation

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

example

const ShakeEle = () => <div className="ani-shake ani-count-2"></div>

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.

Animate duration times

ani-duration-[times]

example

const AniCount = () => (
  <>
    <div className="ani-shake ani-duration-200"></div>
    <div className="ani-shake ani-duration-300"></div>
    <div className="ani-shake ani-duration-[100ms]"></div>
    <div className="ani-shake ani-duration-1000"></div>
  </>
)

Animate repeat count

ani-count-[count]

example

const AniCount = () => (
  <>
    <div className="ani-shake ani-count-1"></div>
    <div className="ani-shake ani-count-2"></div>
    <div className="ani-shake ani-count-[100]"></div>
    <div className="ani-shake ani-count-infinite"></div>
  </>
)

Shake animation

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

example

const ShakeEle = () => <div className="ani-shake ani-count-2"></div>

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.

License

MIT © Micah Fang.