Vinicunca

Usage

This is a preset 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.

In order to use animations provided by this preset, you need to add the animate-in or animate-out classname for enter or exit animations correspondingly, then add animations you need.

Different animations (fade, zoom, spin and slide) can be used together. For example the below code will make the element fade in, zoom in and slide in from top at the same time.
<div class="animate-in fade-in-50 zoom-in-80 slide-in-from-top-5">
  Hello there
</div>
Usage of the bracket [] syntax is dropped and this is intentional because:
  • UnoCSS is very flexible, and you don't need to use it at all in this preset.
  • The syntax is error-prone and may destroy the whole animation with a single invalid value.
For anything you define in [] except specific syntax for CSS variables (e.g. [--foo]), it will always use the value inside as is, hence it's very easy to make mistakes.E.g. the below code will destroy the whole animation since it's not a valid rotate() value.
<button class="animate-in spin-in-[30]">Button A</button>
It will generate --vin-enter-rotate: 30;, which lacks a unit and will make the whole transform property invalid.Instead, just write spin-in-30 or spin-in-30deg to make it work, which will generate --vin-enter-rotate: 30deg;.

Enter Animations

To give an element enter animations, use the animate-in shortcut in combination with fade-in, zoom-in, spin-in and slide-in classnames.

<button class="animate-in fade-in ...">Button A</button>
<button class="animate-in spin-in ...">Button B</button>
<button class="animate-in zoom-in ...">Button C</button>
<button class="animate-in slide-in-top ...">Button D</button>

Exit Animations

To give an element exit animations, use the animate-out shortcut in combination with fade-out, zoom-out, spin-out and slide-out classnames.

<button class="animate-out fade-out ...">Button A</button>
<button class="animate-out spin-out ...">Button B</button>
<button class="animate-out zoom-out ...">Button C</button>
<button class="animate-out slide-out-bottom ...">Button D</button>

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.

Migration Guide

tailwindcss-animate

Animations part remains as is, but way more flexible and powerful thanks to UnoCSS's dynamic rules.

Animation property modifiers are already supported by @unocss/preset-wind4, but with slightly different syntax.

animation-delay

tailwindcss-animateunocss-preset-animations
delay-<number>animate-delay-<number>
<button class="animate-in fade-in animate-delay-150">Button A</button>
<button class="animate-in fade-in animate-delay-300">Button B</button>
<button class="animate-in fade-in animate-delay-700">Button C</button>

animation-direction

tailwindcss-animate unocss-preset-animations
direction-<keyword> animate-<keyword>
animate-direction-<keyword> 
<button class="animate-in fade-in animate-normal">Button A</button>
<button class="animate-in fade-in animate-reverse">Button B</button>
<button class="animate-in fade-in animate-alternate">Button C</button>
<button class="animate-in fade-in animate-alternate-reverse">Button D</button>

<button class="animate-in fade-in animate-direction-normal">Button E</button>

animation-duration

tailwindcss-animateunocss-preset-animations
duration-<number>animate-duration-<number>
<button class="animate-in fade-in animate-duration-150">Button A</button>
<button class="animate-in fade-in animate-duration-300">Button B</button>
<button class="animate-in fade-in animate-duration-700">Button C</button>
If no animation-duration is defined, it will fall back to theme.duration.DEFAULT.The value is 150ms by default if unchanged, see unocss/packages/preset-mini/src/_theme/misc.ts at main ยท unocss/unocss

animation-fill-mode

tailwindcss-animate unocss-preset-animations
fill-mode-<keyword> animate-<keyword>
animate-fill-<keyword>
animate-mode-<keyword>
animate-fill-mode-<keyword> 
<button class="animate-in fade-in animate-none">Button A</button>
<button class="animate-in fade-in animate-forwards">Button B</button>
<button class="animate-in fade-in animate-backwards">Button C</button>
<button class="animate-in fade-in animate-both">Button D</button>

<button class="animate-in fade-in animate-fill-none">Button E</button>
<button class="animate-in fade-in animate-mode-none">Button F</button>
<button class="animate-in fade-in animate-fill-mode-none">Button G</button>

animation-iteration-count

tailwindcss-animate unocss-preset-animations
repeat-<number|keyword> animate-iteration-<number|keyword>
animate-count-<number|keyword>
animate-iteration-count-<number|keyword> 
<button class="animate-in fade-in animate-iteration-0">Button A</button>
<button class="animate-in fade-in animate-iteration-1">Button B</button>
<button class="animate-in fade-in animate-iteration-infinite">Button C</button>

<button class="animate-in fade-in animate-count-0">Button D</button>
<button class="animate-in fade-in animate-iteration-count-0">Button E</button>

animation-play-state

tailwindcss-animate unocss-preset-animations
running / paused animate-<keyword>
animate-play-<keyword>
animate-state-<keyword>
animate-play-state-<keyword> 
<button class="animate-in fade-in animate-paused">Button A</button>
<button class="animate-in fade-in animate-running">Button B</button>

<button class="animate-in fade-in animate-play-paused">Button C</button>
<button class="animate-in fade-in animate-state-paused">Button D</button>
<button class="animate-in fade-in animate-play-state-paused">Button E</button>

animation-timing-function

tailwindcss-animateunocss-preset-animations
ease-<easing>animate-ease-<easing>
<button class="animate-in fade-in animate-ease-linear">Button A</button>
<button class="animate-in fade-in animate-ease-in">Button B</button>
<button class="animate-in fade-in animate-ease-out">Button C</button>
<button class="animate-in fade-in animate-ease-in-out">Button D</button>

Prefers reduced motion

Usage is the same as in TailwindCSS.

<button class="motion-reduce:...">Button A</button>
<button class="motion-safe:...">Button B</button>

Theme

Custom theme configurations for the animations preset.

Fade Animations

Define animations's opacity.