Getting Started

Overview

This is a preset of UnoCSS for creating beautiful animations with simple classnames.

It adapts the tailwindcss-animate TailwindCSS plugin to be compatible with UnoCSS but more flexible and user-friendly.

Installation

npm

npm install -D unocss-preset-animations

yarn

yarn add -D unocss-preset-animations

pnpm

pnpm add -D unocss-preset-animations

bun

bun add -D unocss-preset-animations

DANGER

This preset requires unocss version of v0.56.0+

WARNING

This preset is based on @unocss/preset-wind3, please make sure it is included in the presets, otherwise it won't work as expected.

TIP

This preset is compatible with @unocss/preset-wind4, but @unocss/preset-wind3 is recommended for better compatibility.

This preset will adapt tw-animate-css in v2 to provide better integration with @unocss/preset-wind4 soon.

Usage

In your UnoCSS config, add this preset to the presets option:

import { defineConfig, presetWind3 } from 'unocss' // v0.56.0 or above is required
import { presetAnimations } from 'unocss-preset-animations'
import type { Theme } from '@unocss/preset-wind3'
// This can also be imported from '@unocss/preset-mini', or from 'unocss':
import type { PresetWind3Theme as Theme } from 'unocss'

export default defineConfig<Theme>({
  presets: [
    presetWind3(),
    presetAnimations(/* options */),
  ]
})

Options

All properties are optional.

unit

• Type: 'ms' | 's'
• Default: 'ms'

The unit of time options (duration and delay).

delay

• Type: number

Default delay time for animations.

direction

• Type: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse'

Default direction of animations.

duration

• Type: number
• Default: theme.duration.DEFAULT (150ms if unchanged)

Default duration time for animations.

fillMode

• Type: 'none' | 'forwards' | 'backwards' | 'both'

Default fill mode for animations. both is generally useful.

iterationCount

• Type: number | 'infinite'

Default iteration count for animations.

playState

• Type: 'running' | 'paused'

Default play state for animations.

timingFunction

• Type: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | string

Default timing function for animations.