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.
npm i tailwindcss-magic
or
yarn add tailwindcss-magicEdit 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 ...
<div className="magic-magic"></div>@layer components {
.animation-magic-repeat-2 {
@apply magic-magic animate-iteration-2;
}
}<div className="animation-magic-repeat-2"></div><div class="group">
<h2 class="group-hover:magic-magic">Hello World</h2>
</div>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.
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
- How do I remember so many animation names: Tailwinds-magic and Tailwind Intellisense work well together, so take it easy!
Make your own magical animation and create a Pull Request! I'd like to see what you've made ;)
- Locally example
cd example
yarn dev
- 📦 Package
yarn
yarn build
- Unit test
npm run test
- add the online DEMO
Most of the animation effects are based on magic.