Package Exports

tailwindcss-animated
tailwindcss-animated/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-animated) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tailwind CSS Animated

Extended animation utilities for Tailwind CSS
https://tailwindcss-animated.com

Installation

Install the plugin from npm:

npm i tailwindcss-animated

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

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('tailwindcss-animated')
  ],
}

Usage

This plugin brings various utility classes as well as several ready-to-use CSS animations. Here are some simple examples:

<button class="animate-wiggle">
  Hej, look at me!
</button>

<button class="animate-jump-in animate-delay-300 animate-once">
  Wait a bit, then jump right in.
</button>

Ready-to-use animations

There are several animations that can be integrated with a single utility class. These extend the Spin, Ping and Pulse animations of Tailwind CSS.

Open the configurator to see them in action:
https://tailwindcss-animated.com/configurator.html

All animations can be customized with the utility classes below.

Duration

Class	Properties
animate-duration-75	animation-duration: 75ms;
animate-duration-100	animation-duration: 100ms;
animate-duration-150	animation-duration: 150ms;
animate-duration-200	animation-duration: 200ms;
animate-duration-300	animation-duration: 300ms;
animate-duration-500	animation-duration: 500ms;
animate-duration-700	animation-duration: 700ms;
animate-duration-1000	animation-duration: 1000ms;

Delay

Class	Properties
animate-delay-none	animation-delay: 0ms;
animate-delay-75	animation-delay: 75ms;
animate-delay-100	animation-delay: 100ms;
animate-delay-150	animation-delay: 150ms;
animate-delay-200	animation-delay: 200ms;
animate-delay-300	animation-delay: 300ms;
animate-delay-500	animation-delay: 500ms;
animate-delay-700	animation-delay: 700ms;
animate-delay-1000	animation-delay: 1000ms;

Iteration Count

Class	Properties
animate-infinite	animation-iteration-count: infinite;
animate-once	animation-iteration-count: 1;
animate-twice	animation-iteration-count: 2;
animate-thrice	animation-iteration-count: 3;

Direction

Class	Properties
animate-normal	animation-direction: normal;
animate-reverse	animation-direction: reverse;
animate-alternate	animation-direction: alternate;
animate-alternate-reverse	animation-direction: alternate-reverse;

Timing Function

Class	Properties
animate-ease-linear	animation-timing-function: linear;
animate-ease-in	animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
animate-ease-out	animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
animate-ease-in-out	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

Fill Mode

Class	Properties
animate-fill-none	animation-fill-mode: normal;
animate-fill-forwards	animation-fill-mode: forwards;
animate-fill-backwards	animation-fill-mode: backwards;
animate-fill-both	animation-fill-mode: both;

Play State

Class	Properties
animate-run	animation-play-state: running;
animate-play	animation-play-state: running;
animate-stop	animation-play-state: paused;
animate-pause	animation-play-state: paused;

Variant modifiers and breakpoints

All variants and breakpoints (hover, focus, lg, ...) work with animations und animation utility classes.

<div class="lg:hover:animate-shake motion-reduce:animate-none">
  <!-- ... -->
</div>

Arbitrary values

You can create custom properies on the fly by using square brackets. This works for Delay and Durations values.

<div class="animate-delay-[85ms] animate-duration-[2s]">
  <!-- ... -->
</div>

Customizing your theme

If you want to change some animations, extend your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animationDelay: {
        275: '275ms',
        5000: '5s',
      },
      animationDuration: {
        2000: '2s',
        'long': '10s',
        'very-long': '20s',
      },
    },
  },
  plugins: [
    require('tailwindcss-animated')
  ],
}

Take a look at src/theme.js for the default settings.