DOCSEARCHbyAlgolia
Submit Docs

UnoCSS Preset Animations

website·Indexed 31 days ago

https://unocss-preset-animations.aelita.me/

A preset for UnoCSS designed for creating animations, featuring enter and exit animations such as fade, slide, spin, and zoom. It includes support for animation properties, timing functions, and provides a migration guide from tailwindcss-animate.

Tokens
4.4K
Snippets
32
Records
33
Agent score
52%

What's inside unocss-preset-animations

  1. Apply slide-out animations

    Use slide-out-<direction>-<value> (or the more readable slide-out-to-<direction>-<value>) to define the starting translation for an exit animation. If no value is specified, the default is 100%.

    Directions:

    • t or top (Y-axis)
    • b or bottom (Y-axis)
    • l or left (X-axis)
    • r or right (X-axis)

    Values:

    • Numbers, Percentages, Fractions, full, or CSS variables.
    <!-- Slide out towards top -->
<button class="animate-out slide-out-t">Button A</button>

<!-- Slide out towards top with specific value -->
<button class="animate-out slide-out-t-50%">Button B</button>

  2. Handle reduced motion preferences in unocss-preset-animations

    The usage for reduced motion preferences is identical to TailwindCSS, using the motion-reduce: and motion-safe: modifiers.
    <button class="motion-reduce:... ">Button A</button>
<button class="motion-safe:... ">Button B</button>

  3. Migrate animation-delay from tailwindcss-animate to unocss-preset-animations

    Replace delay-<number> classes with animate-delay-<number> to set the animation delay.
    <button class="animate-in fade-in animate-delay-150">Button A</button>
<button class="animate-in fade-in animate-delay-300">Button B</button>

  4. Apply slide-in animations

    Use slide-in-<direction>-<value> (or the more readable slide-in-from-<direction>-<value>) to define the starting translation for an enter animation. If no value is specified, the default is 100%.

    Directions:

    • t or top (Y-axis)
    • b or bottom (Y-axis)
    • l or left (X-axis)
    • r or right (X-axis)

    Values:

    • Numbers (e.g., 50), Percentages (e.g., 66.6%), Fractions (e.g., 1/2), full (100%), or CSS variables (e.g., $my-css-var).

    Note: You can combine X and Y directions (e.g., slide-in-t and slide-in-l) to create diagonal movement from corners.

    <!-- Slide in from top (default 100%) -->
<button class="animate-in slide-in-t">Button A</button>

<!-- Slide in from top-left corner with specific values -->
<button class="animate-in slide-in-t-1/2 slide-in-l-4">Button B</button>

<!-- Slide in using a CSS variable -->
<button class="animate-in slide-in-t-$my-css-var">Button C</button>

  5. Migrate animation-timing-function from tailwindcss-animate to unocss-preset-animations

    Replace ease-<easing> classes with animate-ease-<easing>.
    <button class="animate-in fade-in animate-ease-linear">Button A</button>
<button class="animate-in fade-in animate-ease-in-out">Button D</button>

  6. Install unocss-preset-animations

    Install the unocss-preset-animations package as a development dependency. This preset requires unocss version v0.56.0 or higher.
    # Using npm
npm install -D unocss-preset-animations

# Using yarn
yarn add -D unocss-preset-animations

# Using pnpm
pnpm add -D unocss-preset-animations

# Using bun
bun add -D unocss-preset-animations

  7. Migrate animation-iteration-count from tailwindcss-animate to unocss-preset-animations

    Replace repeat-<number|keyword>, animate-count-<number|keyword>, or animate-iteration-count-<number|keyword> with animate-iteration-<number|keyword>.
    <button class="animate-in fade-in animate-iteration-1">Button B</button>
<button class="animate-in fade-in animate-iteration-infinite">Button C</button>

  8. Apply enter and exit animations using UnoCSS animations preset

    To trigger animations in this preset, you must first apply a base trigger class: animate-in for enter animations or animate-out for exit animations. Once the trigger class is applied, you can combine multiple animation types (fade, zoom, spin, and slide) on the same element to create complex transitions.
    <!-- Example: Element that fades in, zooms in, and slides in from the top simultaneously -->
<button class="animate-in fade-in-50 zoom-in-80 slide-in-from-top-5">Button A</button>

<!-- Basic Enter Animations -->
<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>

<!-- Basic Exit Animations -->
<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>

  9. Migrate animation-duration from tailwindcss-animate to unocss-preset-animations

    Replace duration-<number> classes with animate-duration-<number>. If no duration is defined, it defaults to theme.duration.DEFAULT (which is 150ms by default).
    <button class="animate-in fade-in animate-duration-150">Button A</button>
<button class="animate-in fade-in animate-duration-700">Button C</button>

  10. Configure unocss-preset-animations in the Interactive Documentation tool

    To use the animations preset within the official UnoCSS Interactive Documentation tool, you must configure the UnoCSS setup in the editor. This allows you to see live previews of the animations as you write documentation or test utilities.
    import { defineConfig, presetWind3 } from 'unocss'
import { presetAnimations } from 'unocss-preset-animations'

export default defineConfig({
  presets: [
    presetWind3(),
    presetAnimations({
      fillMode: 'both', // or whatever options you want
    }),
  ],
})

  11. Migrate animation-play-state from tailwindcss-animate to unocss-preset-animations

    Replace running, paused, animate-play-<keyword>, animate-state-<keyword>, or animate-play-state-<keyword> with animate-<keyword> (e.g., animate-paused, animate-running).
    <button class="animate-in fade-in animate-paused">Button A</button>
<button class="animate-in fade-in animate-running">Button B</button>

  12. Migrate animation-direction from tailwindcss-animate to unocss-preset-animations

    Replace direction-<keyword> or animate-direction-<keyword> classes with animate-<keyword> (e.g., animate-reverse, animate-alternate).
    <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>