{"id":20489347,"url":"https://github.com/sylvenas/tailwindcss-animation-property","last_synced_at":"2025-04-13T16:32:44.327Z","repository":{"id":65514164,"uuid":"460755254","full_name":"Sylvenas/tailwindcss-animation-property","owner":"Sylvenas","description":"A plugin that provides utilities for animation property.","archived":false,"fork":false,"pushed_at":"2022-02-21T03:02:59.000Z","size":80,"stargazers_count":14,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-27T07:21:31.383Z","etag":null,"topics":["animation-dely","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-play-state","animation-timing-function","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sylvenas.png","metadata":{"files":{"readme":"README-zh_CN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-18T07:37:49.000Z","updated_at":"2024-01-14T02:57:26.000Z","dependencies_parsed_at":"2023-01-26T21:16:09.634Z","dependency_job_id":null,"html_url":"https://github.com/Sylvenas/tailwindcss-animation-property","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sylvenas%2Ftailwindcss-animation-property","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sylvenas%2Ftailwindcss-animation-property/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sylvenas%2Ftailwindcss-animation-property/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sylvenas%2Ftailwindcss-animation-property/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sylvenas","download_url":"https://codeload.github.com/Sylvenas/tailwindcss-animation-property/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248744024,"owners_count":21154792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation-dely","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-play-state","animation-timing-function","tailwindcss","tailwindcss-plugin"],"created_at":"2024-11-15T17:12:31.597Z","updated_at":"2025-04-13T16:32:44.302Z","avatar_url":"https://github.com/Sylvenas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailwindcss animation plugin\n\n[English](./README.md) | 简体中文\n\n声明式编写 animation 属性的插件，提供了常用的 animation 属性，同时可以使用[配置](#Config mode)添加新的属性，或者可以采用[JIT](https://tailwindcss.com/blog/just-in-time-the-next-generation-of-tailwind-css)动态编写 animaton 属性。\n\n[Check out DEMO]()\n\n## 使用方法\n\n### install\n\n```sh\n# Using npm\nnpm i tailwindcss-animation-property\n\n# Using yarn\nyarn add tailwindcss-animation-property\n```\n\n### 引入插件\n\nThen add the plugin to your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    // ...\n    require(\"tailwindcss-animation-property\")(),\n  ],\n};\n```\n\n### 在 HTML 元素中使用\n\n```html\n\u003cdiv className=\"animation-duration-1s\"\u003e\u003c/div\u003e\n```\n\n## 默认 animation property\n\n### animation-duration\n\n`animation-duration-1s` 解析成 `animation-duration:1s`, 插件内置时间为 `1s`,`2s`,`3s`,`4s`,`5s`.\n\n## 自定义 animation property\n\n### JIT mode\n\n- animation-duration\n  - animation-duration-[100ms] -\u003e `animation-duration: 100ms`\n  - animation-duration-[10s] -\u003e `animation-duration: 10s`\n\n### Config mode\n\n插件可以通过传递 animation property 参数的方式，传递自定义的属性值\n\n```js\nrequire(\"../dist/index.js\")({\n  animationDuration: [\"500ms\", \"6s\", \"0.5s\"],\n  animationDelay: [\"2000ms\", \"3s\"],\n  animationIterationCount: [10, 20],\n});\n```\n\n## 动画名称\n\n所有的动画名称均以 `magic` 开头，然后下划线之后是“真正的”动画名称(`magic-puffIn`, `magic-openDownLeft`...)，全部的动画名称列表如下：\n\n```\n.\n├── magic\n│   |── magic\n│   |── twisterInDown\n│   |── twisterInUp\n│   └── swap\n├── bling\n│   |── puffIn\n│   |── puffOut\n│   |── vanishIn\n│   └── vanishOut\n├── staticEffects\n│   |── openDownLeft\n│   |── openDownLeftReturn\n│   |── openDownRight\n│   |── openDownRightReturn\n│   |── openUpLeft\n│   |── openUpLeftReturn\n│   |── openUpRight\n│   └── openUpRightReturn\n├── staticEffectsOut\n│   |── openDownLeftOut\n│   |── openDownRightOut\n│   |── openUpLeftOut\n│   └── openUpRightOut\n├── perspective\n│   |── perspectiveDown\n│   |── perspectiveDownReturn\n│   |── perspectiveLeft\n│   |── perspectiveLeftReturn\n│   |── perspectiveRight\n│   |── perspectiveRightReturn\n│   |── perspectiveUp\n│   └── perspectiveUpReturn\n├── rotate\n│   |── rotateDownIn\n│   |── rotateDownOut\n│   |── rotateLeftIn\n│   |── rotateLeftOut\n│   |── rotateRightIn\n│   |── rotateRightOut\n│   |── rotateUpIn\n│   └── rotateUpOut\n├── slide\n│   |── slideDown\n│   |── slideDownReturn\n│   |── slideLeft\n│   |── slideLeftReturn\n│   |── slideRight\n│   |── slideRightReturn\n│   |── slideUp\n│   └── slideUpReturn\n├── math\n│   |── foolishIn\n│   |── foolishOut\n│   |── holeIn\n│   |── holeOut\n│   |── swashIn\n│   └── swashOut\n├── tin\n│   |── tinDownIn\n│   |── tinDownOut\n│   |── tinLeftIn\n│   |── tinLeftOut\n│   |── tinRightIn\n│   |── tinRightOut\n│   |── tinUpIn\n│   └── tinUpOut\n├── bomb\n│   |── bombLeftOut\n│   └── bombRightOut\n├── boing\n│   |── boingInUp\n│   └── boingOutDown\n├── space\n│   |── spaceInDown\n│   |── spaceInLeft\n│   |── spaceInRight\n│   |── spaceInUp\n│   |── spaceOutDown\n│   |── spaceOutLeft\n│   |── spaceOutRight\n│   └── spaceOutUp\n```\n\n### 开发与测试\n\n- 📦 打包\n\n```\nyarn\nyarn build\n```\n\n- 单元测试\n\n```\nnpm run test\n```\n\n## TODO\n\n- 添加线上 DEMO\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsylvenas%2Ftailwindcss-animation-property","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsylvenas%2Ftailwindcss-animation-property","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsylvenas%2Ftailwindcss-animation-property/lists"}