tailwindcss-animator

> A Tailwind CSS plugin for creating animations.

!snapshot

Installation

Install the plugin from npm

``sh
npm i tailwindcss-animator -D
`

Then add the plugin to your tailwind.config.js file:

`ts
/* @type {import('tailwindcss').Config} /
module.exports = {
theme: {
extend: {},
},
plugins: [
require('tailwindcss-animator'),
],
}

`

Basic usage

$3

- class ani-{name}

`html


`

$3

- class ani-dur-{value}
- Arbitrary values
- number 888 => 888ms
- string 888s => 888s

`html


`

$3

- class ani-delay-{value}
- Arbitrary values
- number 888 => 888ms
- string 888s => 888s

`html


`

$3

- class ani-ease-{value}
- Arbitrary values
- number 10 => steps(10, end)
- in|out|in-out|linear
- start => step-start
- end => step-end
- in-sine | out-sine | in-out-sine | in-quad | out-quad | in-out-quad | in-cubic | out-cubic | in-out-cubic | in-quart | out-quart | in-out-quart | in-quint | out-quint | in-out-quint | in-expo | out-expo | in-out-expo | in-circ | out-circ | in-out-circ | in-back | out-back | in-out-bac Will be automatically converted to cubic-bezier

`html


`

$3

- class ani-repeat-{value}
- Arbitrary values
- inf | infinite => infinite
- number => animation iteration count number

`html


`

$3

- class ani-dir-{value}
- normal | reverse | rev | alternate | alt | altrev | alternate-reverse
- Arbitrary values : Does not support

`html



`

$3

- class ani-mode-{value}
- none | fwd | forwards | bck | backwards | both
- Arbitrary values : Does not support

`html


`

$3

- class ani-state-{value}
- running | paused
- Arbitrary values : Does not support

`html


`

$3

- class ani-origin-{value}
- center | top | t | top-right | tr | right | r | bottom-right | br | bottom | b | bottom-left | bl | left | l | top-left | tl
- Arbitrary values : Does not support

`html


`

Configure

`ts
/* @type {import('tailwindcss').Config} /

type IPluginOptions = {
// animation class prefix
prefix?: string, // default ani
// default animation properties
properties?: {
animationDelay?: string;
animationDirection?: string;
animationDuration?: string;
animationFillMode?: string;
animationIterationCount?: string;
animationPlayState?: string;
animationTimeingFunction?: string;
backfaceVisibility?: string;
}
}

// tailwind.config.js
plugins: [
require('tailwindcss-animator')({
prefix: 'wow', // 'wow-fade-in'
properties: {
animationDirection: '2000ms'
}
}),
]
``

Theme

All themes are defined in the file theme.ts

- animationDelay
- animationDuration
- animationTimingFunction
- animationIterationCount
- animationDirection
- animationFillMode
- animationPlayState
- animationTransformOrigin

Credits

- animate.css
- animista.net

License

This project is licensed under the MIT License.