tailwindcss-magic

English | 简体中文

A set of magical animation libraries for tailwindcss, accessed using the tailwindcss plugin.

Preview the example live on CodeSandbox: Open in CodeSandbox

How to customize the animation properties？ Try tailwindcss-animation-property.

Usage

install

npm i tailwindcss-magic

or

yarn add tailwindcss-magic

import plugin

Edit the tailwind.config.js file

module.exports = {
  // ...
  plugins: [require("tailwindcss-magic")],
};

After the code has been wrapped by tailwindcss, only the animations which are already used will be included in the final code, so be relax ...

Used in HTML element

<div className="magic-magic"></div>

Used with @apply

@layer components {
  .animation-magic-repeat-2 {
    @apply magic-magic animate-iteration-2;
  }
}

<div className="animation-magic-repeat-2"></div>

Used in states such as Hover, Focus, etc.

<div class="group">
  <h2 class="group-hover:magic-magic">Hello World</h2>
</div>

Customized animation property

The default animation property setting is animation-duration:1s.

You can use the tailwindcss-animation-property to modify the other animation properties: animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode.

Animation

All animation names are composed of magic and a name follows the underscore (magic-puffIn, magic-openDownLeft...).

The full list of animation titles is as follows：

.
├── magic
│   |── magic
│   |── twisterInDown
│   |── twisterInUp
│   └── swap
├── bling
│   |── puffIn
│   |── puffOut
│   |── vanishIn
│   └── vanishOut
├── staticEffects
│   |── openDownLeft
│   |── openDownLeftReturn
│   |── openDownRight
│   |── openDownRightReturn
│   |── openUpLeft
│   |── openUpLeftReturn
│   |── openUpRight
│   └── openUpRightReturn
├── staticEffectsOut
│   |── openDownLeftOut
│   |── openDownRightOut
│   |── openUpLeftOut
│   └── openUpRightOut
├── perspective
│   |── perspectiveDown
│   |── perspectiveDownReturn
│   |── perspectiveLeft
│   |── perspectiveLeftReturn
│   |── perspectiveRight
│   |── perspectiveRightReturn
│   |── perspectiveUp
│   └── perspectiveUpReturn
├── rotate
│   |── rotateDownIn
│   |── rotateDownOut
│   |── rotateLeftIn
│   |── rotateLeftOut
│   |── rotateRightIn
│   |── rotateRightOut
│   |── rotateUpIn
│   └── rotateUpOut
├── slide
│   |── slideDown
│   |── slideDownReturn
│   |── slideLeft
│   |── slideLeftReturn
│   |── slideRight
│   |── slideRightReturn
│   |── slideUp
│   └── slideUpReturn
├── math
│   |── foolishIn
│   |── foolishOut
│   |── holeIn
│   |── holeOut
│   |── swashIn
│   └── swashOut
├── tin
│   |── tinDownIn
│   |── tinDownOut
│   |── tinLeftIn
│   |── tinLeftOut
│   |── tinRightIn
│   |── tinRightOut
│   |── tinUpIn
│   └── tinUpOut
├── bomb
│   |── bombLeftOut
│   └── bombRightOut
├── boing
│   |── boingInUp
│   └── boingOutDown
├── space
│   |── spaceInDown
│   |── spaceInLeft
│   |── spaceInRight
│   |── spaceInUp
│   |── spaceOutDown
│   |── spaceOutLeft
│   |── spaceOutRight
│   └── spaceOutUp

FAQ

• How do I remember so many animation names: Tailwinds-magic and Tailwind Intellisense work well together, so take it easy!

Contribute

Make your own magical animation and create a Pull Request! I'd like to see what you've made ;)

Run

• Locally example

cd example
yarn dev

• 📦 Package

yarn
yarn build

• Unit test

npm run test

TODO

• add the online DEMO

License

MIT

Most of the animation effects are based on magic.