# tailwindcss-animation-property

A plugin that provides utilities for animation property. Not only does the plugin provide the usual animation properties, these also support dynamic writing using [JIT mode](https://v2.tailwindcss.com/docs/just-in-time-mode), even you can add new properties by using [configuration](#configuration).

The example can be previewed on CodeSandbox: [Check out DEMO](https://codesandbox.io/s/nice-bell-czxzix)

- [animation-duration](#animation-duration)
- [animation-delay](#animation-delay)
- [animation-iteration-count](#animation-iteration-count)
- [animation-fill-mode](#animation-fill-mode)
- [animation-direction](#animation-direction)
- [animation-timing-function](#animation-timing-function)
- [animation-play-state](#animation-play-state)

> If you don't want to write all the keyframes yourself. Try [tailwindcss-magic](https://github.com/Sylvenas/tailwindcss-magic).

## Usage

### Installation

```sh
# npm
npm i tailwindcss-animation-property

# yarn
yarn add tailwindcss-animation-property
```

### Import plugin

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

```js
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    // ...
    require("tailwindcss-animation-property")(),
  ],
};
```

### Used in HTML element class

```html
<div className="animation-duration-3s"></div>
```

### Used with @apply

```css
@layer components {
  .animation-magic-repeat-2 {
    @apply magic-magic animate-iteration-2;
  }
}
```

```html
<div className="animation-magic-repeat-2"></div>
```

## Default & Customized animation property

### animation-duration

Use the `animation-duration-{number}ms` or `animation-duration-{number}s` utilities to sets the length of time that an animation takes to complete one cycle.

defalut:

- animation-duration-1s -> `animation-duration: 1s`
- ...
- animation-duration-5s -> `animation-duration: 5s`

JIT mode Example:

- animation-duration-[100ms] -> `animation-duration: 100ms`
- animation-duration-[10s] -> `animation-duration: 10s`

### animation-delay

Use the `animation-delay-{number}ms` or `animation-delay-{number}s` utilities to sets the amount of time to wait from applying the animation to an element before beginning to perform the animation.

defalut:

- animation-delay-0s -> `animation-delay: 0s`
- ...
- animation-delay-5s -> `animation-delay: 5s`

JIT mode Example:

- animation-delay-[100ms] -> `animation-delay: 100ms`
- animation-delay-[10s] -> `animation-delay: 10s`

### animation-iteration-count

Use the `animation-iteration-{number}` utilities to sets the number of times an animation sequence should be played before stopping.

defalut:

- animation-iteration-1 -> `animation-iteration-count: 1`
- ...
- animation-iteration-5 -> `animation-iteration-count: 5`

JIT mode Example:

- animation-iteration-[6] -> `animation-iteration-count: 6`
- animation-iteration-[10] -> `animation-iteration-count: 10`

### animation-fill-mode

Use the `animation-fill-{mode}` utilities to sets how a CSS animation applies styles to its target before and after its execution.

defalut:

- animation-fill-forwards -> `animation-fill-mode: forwards`
- animation-fill-backwards -> `animation-fill-mode: backwards`
- animation-fill-both -> `animation-fill-mode: both`
- animation-fill-none -> `animation-fill-mode: none`

JIT mode Example:

- animation-fill-[forwards] -> `animation-fill-mode: forwards`

### animation-direction

Use the `animation-direction-{dir}` utilities sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.

defalut:

- animation-direction-normal -> `animation-direction: normal`
- animation-direction-reverse -> `animation-direction: reverse`
- animation-direction-alternate -> `animation-direction: alternate`
- animation-direction-alternate-reverse -> `animation-direction: alternate-reverse`

### animation-timing-function

Use the `animation-timing-{function}` utilities to sets how an animation progresses through the duration of each cycle.

defalut:

- animation-timing-linear -> `animation-timing-function: linear`
- animation-timing-in -> `animation-timing-function: in`
- animation-timing-out -> `animation-timing-function: out`
- animation-timing-in-out -> `animation-timing-function: in-out`
- animate-steps-start-{1...5} -> `animation-timing-function: steps(1...5, jump-start)`
- animate-steps-end-{1...5} -> `animation-timing-function: steps(1...5, jump-end)`
- animate-steps-both-{1...5} -> `animation-timing-function: steps(1...5, jump-both)`
- animate-steps-none-{1...5} -> `animation-timing-function: steps(1...5, jump-none)`

JIT mode Example:

- animation-timing-[linear] -> `animation-timing-function: linear`
- animation-timing-[p0,p1,p2,p3] -> `animation-timing-function: cubic-bezier(p0, p1, p2, p4);`
- animate-steps-start-[n] -> `animation-timing-function: steps(n, jump-start)`
- animate-steps-end-[n] -> `animation-timing-function: steps(n, jump-end)`
- animate-steps-both-[n] -> `animation-timing-function: steps(n, jump-both)`
- animate-steps-none-[n] -> `animation-timing-function: steps(n, jump-none)`

### animation-play-state

Use the `animation-play-{state}` utilities to sets whether an animation is running or paused.

defalut:

- animation-play-paused -> `animation-play-state: paused`
- animation-play-running -> `animation-play-state: running`

## Configuration

You can configure custom animation properties by passing parameters to the plugin.

```js
require("tailwindcss-animation-property")({
  animationDuration: ["500ms", "6s", "0.5s"]
  // `animation-duration-500ms`, `animation-duration-6s`, `animation-duration-0.5s`

  animationDelay: ["2000ms", "3s"],
  // `animation-delay-2000ms`, `animation-delay-3s`

  animationIterationCount: [6, 7],
  // `animation-iteration-6`, `animation-iteration-7`

  animationFillMode: ['xxx'],
  // `animation-fill-xxx`

  animationDirection: ['xxx'],
  // `animation-direction-xxx`

  animationTimingFunction: {
    "in-out-cubic": ".65,0,.35,1",
  },
  // `animation-timing-in-out-cubic`

  animationPlayState: ['xxx'],
  // `animation-direction-xxx`

  animationStepsStart: [6,8],
  // `animate-steps-start-6`,`animate-steps-start-8`

  animationStepsEnd: [],  // same as animationStepsStart
  animationStepsBoth: [], // ...
  animationStepsNone: [], // ...
});
```

## FAQ

- How do I remember so many animation names?  
  `tailwindcss-animation-property` and [Tailwind Intellisense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) work well together, take it easy!

## Running

- locally example

```sh
cd example
yarn dev
```

- 📦 Package

```
yarn
yarn build
```

- Unit test

```
npm run test
```

## TODO

- add the online DEMO

## License

[MIT](./LICENSE)