unocss-preset-animatecss

🚧 This is an experimental project aimed at exploring the process of converting a static CSS file into a dynamic UnoCSS preset.

Features

• 🔥 Animate.css Preset for UnoCSS

Usage

pnpm i -D unocss-preset-animatecss unocss

// uno.config.ts
import { defineConfig } from 'unocss'
import { presetAnimateCSS } from 'unocss-preset-animatecss'

export default defineConfig({
  presets: [
    // ...
    presetAnimateCSS(),
  ],
})

<!-- Input -->
<div class="animate__animated animate__bounce">Bounce</div>

/* Output */
.animate__animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.animate__bounce {
  animation-name: bounce;
}

Rules

• animate__animated
• animate__[animationName]
• animate__delay-[delay]
• animate__duration-[duration]
• animate__repeat-[repeat]
• animate__infinite
• animate__fast
• animate__faster
• animate__slow
• animate__slower

Credits

• Animate.css
• UnoCSS

License

MIT License © 2023 chizukicn