https://github.com/sylvenas/tailwindcss-animation-property
A plugin that provides utilities for animation property.
https://github.com/sylvenas/tailwindcss-animation-property
animation-dely animation-direction animation-duration animation-fill-mode animation-iteration-count animation-play-state animation-timing-function tailwindcss tailwindcss-plugin
Last synced: about 1 month ago
JSON representation
A plugin that provides utilities for animation property.
- Host: GitHub
- URL: https://github.com/sylvenas/tailwindcss-animation-property
- Owner: Sylvenas
- License: mit
- Created: 2022-02-18T07:37:49.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-21T03:02:59.000Z (about 3 years ago)
- Last Synced: 2025-03-27T07:21:31.383Z (about 2 months ago)
- Topics: animation-dely, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-play-state, animation-timing-function, tailwindcss, tailwindcss-plugin
- Language: JavaScript
- Homepage:
- Size: 78.1 KB
- Stars: 14
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README-zh_CN.md
- License: LICENSE
Awesome Lists containing this project
README
# tailwindcss animation plugin
[English](./README.md) | 简体中文
声明式编写 animation 属性的插件，提供了常用的 animation 属性，同时可以使用[配置](#Config mode)添加新的属性，或者可以采用[JIT](https://tailwindcss.com/blog/just-in-time-the-next-generation-of-tailwind-css)动态编写 animaton 属性。
[Check out DEMO]()
## 使用方法
### install
```sh
# Using npm
npm i tailwindcss-animation-property
# Using yarn
yarn add tailwindcss-animation-property
```
### 引入插件
Then add the plugin to your `tailwind.config.js` file:
```js
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
// ...
require("tailwindcss-animation-property")(),
],
};
```
### 在 HTML 元素中使用
```html
```
## 默认 animation property
### animation-duration
`animation-duration-1s` 解析成 `animation-duration:1s`, 插件内置时间为 `1s`,`2s`,`3s`,`4s`,`5s`.
## 自定义 animation property
### JIT mode
- animation-duration
- animation-duration-[100ms] -> `animation-duration: 100ms`
- animation-duration-[10s] -> `animation-duration: 10s`
### Config mode
插件可以通过传递 animation property 参数的方式，传递自定义的属性值
```js
require("../dist/index.js")({
animationDuration: ["500ms", "6s", "0.5s"],
animationDelay: ["2000ms", "3s"],
animationIterationCount: [10, 20],
});
```
## 动画名称
所有的动画名称均以 `magic` 开头，然后下划线之后是“真正的”动画名称(`magic-puffIn`, `magic-openDownLeft`...)，全部的动画名称列表如下：
```
.
├── 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
```
### 开发与测试
- 📦 打包
```
yarn
yarn build
```
- 单元测试
```
npm run test
```
## TODO
- 添加线上 DEMO
## License
[MIT](./LICENSE)