A TailwindCSS plugin provides a variety of commonly used animation effects.
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 -DUpdate your tailwind.config.js
module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx}'],
plugins: [require('@micahfang/twc-animate')], // require the plugin,
}See more examples.
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>
</>
)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>
</>
)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 animateani-shake-horizontal: translate xani-shake-vertical: translate y
See more examples.
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>
</>
)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>
</>
)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 animateani-shake-horizontal: translate xani-shake-vertical: translate y
See more examples.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent