Theme

To align with Tailwind theme configuration, we have extended the UnoCSS theme to support easier animation configuration.

Theme Extension

export interface VinicuncaExtends {
  keyframes?: Record<string, CSSKeyframesRule>;
  /**
   * Different from the original, you can use the following formats:
   *
   * ```ts
   * { name : 'name duration timing-function iteration-count' }
   * ```
   */
  animation?: Objectiable<string>;
}

Based on the UnoCSS preset-mini Theme, we have extended the keyframes and animation fields in extend to align with the Tailwind theme configuration.

animate

In UnoCSS animation configuration, you need to configure all animation properties, and there are many configuration items.

// unocss animation config
{
  theme: {
    animation: {
      keyframes: { spin: '{from{opacity:0}to{opacity:1}}'},
      durations: { spin: '1s' },
      timingFns: { spin: 'linear' },
      counts: { spin: 'infinite' },
    }
  }
}

Keyframes & animation

We have simplified the configuration of keyframes, you only need to provide the name and style of the keyframes.

And we provide a simpler configuration method, you only need to provide the animation name, duration, timing function, and iteration count.

You must follow the following rules to define: [ name, duration, timing-function, iteration-count ]

import { presetVinicunca } from '@vinicunca/unocss-preset';
import { defineConfig } from 'unocss';

export default defineConfig({
  presets: [
    presetVinicunca({
      extendedTheme: {
        keyframes: {
          wiggle: {
            '0%, 100%': { transform: 'rotate(-3deg)' },
            '50%': { transform: 'rotate(3deg)' },
            '20%, 30%': { transform: 'rotate(-3deg)' },
            '80%': { transform: 'rotate(3deg)' },
          },
          animation: {
            spin: 'wiggle 1s linear infinite',
          }
        },
      },
    }),
  ],
});