tailwindcss-animator

A Tailwind CSS plugin for creating animations.

Installation

Install the plugin from npm

npm i tailwindcss-animator -D

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

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

Basic usage

animation

• class ani-{name}

<section class="ani-heartbeat"></section>
<section class="ani-fade-in"></section>
<section class="ani-zoom-out"></section>

animation duration

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

<section class="ani-bounce-in ani-dur-100"></section>
<section class="ani-bounce-in ani-dur-1s"></section>
<section class="ani-bounce-in ani-dur-[2000]"></section>
<section class="ani-bounce-in ani-dur-[10s]"></section>

animation delay

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

<section class="ani-bounce-in ani-delay-100"></section>
<section class="ani-bounce-in ani-delay-1s"></section>
<section class="ani-bounce-in ani-delay-[2000]"></section>
<section class="ani-bounce-in ani-delay-[10s]"></section>

animation timing function

• 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

<section class="ani-bounce-in ani-ease-in"></section>
<section class="ani-bounce-in ani-ease-in-out"></section>
<!-- steps(1, end); -->
<section class="ani-bounce-in ani-ease-1"></section>
<!-- steps(10, end); -->
<section class="ani-bounce-in ani-ease-10"></section>

animation iteration count

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

<section class="ani-bounce-in ani-repeat-2"></section>
<section class="ani-bounce-in ani-repeat-inf"></section>
<section class="ani-bounce-in ani-repeat-infinite"></section>

animation direction

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

<section class="ani-bounce-in ani-dir-reverse"></section>

animation fill mode

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

<section class="ani-bounce-in ani-mode-forwards"></section>
<!-- alias forwards -->
<section class="ani-bounce-in ani-mode-fwd"></section>
<section class="ani-bounce-in ani-mode-backwards"></section>
<!-- alias backwards -->
<section class="ani-bounce-in ani-mode-bck"></section>

animation play state

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

<section class="ani-bounce-in ani-state-running"></section>
<section class="ani-bounce-in ani-state-paused"></section>

animation transform origin

• 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

<section class="ani-zoom-in ani-origin-bottom-right"></section>
<!-- alias bottom right -->
<section class="ani-zoom-in ani-origin-br"></section>

Configure

/** @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.