{"_id":"@anuragroy/tailwindcss-animate","_rev":"1-3c2e2253ed6471a8162cd7a85fc8eb76","name":"@anuragroy/tailwindcss-animate","dist-tags":{"latest":"1.0.6"},"versions":{"1.0.5":{"name":"@anuragroy/tailwindcss-animate","version":"1.0.5","description":"A Tailwind CSS plugin for creating beautiful animations.","main":"index.js","keywords":["tailwind","tailwindcss","css","postcss","plugin","animation","transition","animate","animated","animatecss","animate.css","fade","slide","zoom","spin","opacity","transform","translate","scale"],"author":{"name":"Jamie Kyle","email":"me@thejameskyle.com"},"license":"MIT","peerDependencies":{"tailwindcss":">=3.0.0 || insiders"},"devDependencies":{"husky":"^7.0.4","lint-staged":"^12.3.4","prettier":"^2.5.1","tailwindcss":"^3.0.22"},"lint-staged":{"*.**":"prettier --write"},"directories":{"doc":"docs"},"repository":{"type":"git","url":"git+https://github.com/anurag-roy/tailwindcss-animate.git"},"bugs":{"url":"https://github.com/anurag-roy/tailwindcss-animate/issues"},"homepage":"https://github.com/anurag-roy/tailwindcss-animate#readme","scripts":{"format":"prettier --write '**'","format:check":"prettier --check '**'"},"_id":"@anuragroy/tailwindcss-animate@1.0.5","_integrity":"sha512-7qq6zmjeSckj1+UkiUqriG/QYmaTBSpkAxN0J2uDAS9h8DEkGLJrBps7e2i1mj36c1Yu99eG9ekSy68laJEvzA==","_resolved":"/private/var/folders/29/9k8m6yd51t5blpzk1wq_t8640000gn/T/906f1ad4a8b99ca555180424c97e199d/anuragroy-tailwindcss-animate-1.0.5.tgz","_from":"file:anuragroy-tailwindcss-animate-1.0.5.tgz","_nodeVersion":"18.11.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-7qq6zmjeSckj1+UkiUqriG/QYmaTBSpkAxN0J2uDAS9h8DEkGLJrBps7e2i1mj36c1Yu99eG9ekSy68laJEvzA==","shasum":"36c1a1280c521fef33b3fc173aac04a147385553","tarball":"https://registry.npmjs.org/@anuragroy/tailwindcss-animate/-/tailwindcss-animate-1.0.5.tgz","fileCount":4,"unpackedSize":19084,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDoatWJ/Bwk2mE2BD3BdAusxiCXKZpLxFGkSM1jDi1kSAiBqZx9kqnCKniAbU/Byglpc8qktA0yR16rtVi7deWF62Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYupwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeeA/9GDgXwJ+AcmUmJTUdemMg8qzvOjkfkjTnXURbVPIblyo+pbss\r\nrtaDyM82n6yiqhkpZV4xoD6fyGSKMZQF1GUF4hwD45ll+3QI213g7pZGtTm/\r\ndhbRulmHH479QGlHI4/WgylmpQqNATqSLHuGdJdpn/2GdyRgkxtis3Xfz297\r\nbciu8/JGo5u8r/GQdQnaqzLCRXMgT4wtn3RJgroUdjYavLHpNGcVTXTn47am\r\nquefwujGCTvSDos1DqahhMNbGUqlVyMXsB10svPSzmRuNuQch90qR10wrqL0\r\nKGO+qodkB4AWKs6m+2Y8FZEdjsVrqmiiomCB2NCA/CWjB/SJhI4FHHIEIc4y\r\nT2m82VW3YMBvSctF/niE/kyrKfvYC4vJhO1mJ7SFWUvEFE/fd6Xm8wIaeyai\r\nQGmKllsgjbemHWMQF9DlTRFWC4xeFwaT+yAZqEjsE3MPzXxFlvjPk/DBzGbx\r\nEmnMaCRQ1D884xpoCTOK//bZfIZQmyz2VNnsnCU5a7yJZiGdTUuaVXikCWwq\r\nkTXvTZvHHkfa8xLWR8QZOCFe1GW1UylNd2oZrY+jWyCHO6+FHEeU5kjIYJZm\r\netNT8+ThXLVQYXjxxt8jg0FUFdN1RMWHTnJic5am/pNQaCQUcFHiAwxXWAVI\r\nGG6urkcMPzXcAe8Mc/HyBcg2WZn4SA2dnko=\r\n=FHT6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anuragroy","email":"anuragroy@duck.com"},"maintainers":[{"name":"anuragroy","email":"anuragroy@duck.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tailwindcss-animate_1.0.5_1667426927938_0.5573688922547204"},"_hasShrinkwrap":false},"1.0.6":{"name":"@anuragroy/tailwindcss-animate","version":"1.0.6","description":"A Tailwind CSS plugin for creating beautiful animations.","main":"index.js","types":"index.d.ts","scripts":{"format":"prettier --write '**'","format:check":"prettier --check '**'","prepare":"husky install"},"keywords":["tailwind","tailwindcss","css","postcss","plugin","animation","transition","animate","animated","animatecss","animate.css","fade","slide","zoom","spin","opacity","transform","translate","scale"],"author":{"name":"Jamie Kyle","email":"me@thejameskyle.com"},"license":"MIT","peerDependencies":{"tailwindcss":">=3.0.0 || insiders"},"devDependencies":{"husky":"^7.0.4","lint-staged":"^12.3.4","prettier":"^2.5.1","tailwindcss":"^3.0.22"},"lint-staged":{"*.**":"prettier --write"},"directories":{"doc":"docs"},"repository":{"type":"git","url":"git+https://github.com/anurag-roy/tailwindcss-animate.git"},"bugs":{"url":"https://github.com/anurag-roy/tailwindcss-animate/issues"},"homepage":"https://github.com/anurag-roy/tailwindcss-animate#readme","gitHead":"1d7f18180dd2e865978bd066a26c71d19e122dd0","_id":"@anuragroy/tailwindcss-animate@1.0.6","_nodeVersion":"19.9.0","_npmVersion":"9.6.3","dist":{"integrity":"sha512-kErZ8jqKVJIcOSemkxhhzioYULx6afpQWldsKBUYMiJctwexjcEfgOf772i4QkagWPwwxPwWP09XvTG3dKjHcQ==","shasum":"f252bcb08bb8009a90dbd6937fc03df8f3add3d9","tarball":"https://registry.npmjs.org/@anuragroy/tailwindcss-animate/-/tailwindcss-animate-1.0.6.tgz","fileCount":4,"unpackedSize":19050,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA3VIJvLaZVLMbrPcK2ZdAXxob+S28HjOibnJvNDiN87AiAurXm2+n2ojh/rOtZ0KCKCdfbBoI6DpRdTpZnBdwxUIg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQ3P4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+0xAAglRzFK3TxQquV/O+pg2s/a6Mvm8FBd1ZQGmj+k5AxRz/l7ts\r\nLD1eM3+V53zZ3qwPo9tW9LPD3Ulg6WVk0EpWCNRr4U3W9OgnSpZwJy7mrIkk\r\nNwfomRxL5LzytnCDtEW8FSgRM7NmgnYtR3asgTIsPqyXyFgzii0yhvRcIwNM\r\nUvlUWyloVGVKocq4pZJ1qGCnWlgtzzg0u1bWrk9Ow3gh+FkhO3/7G6Rsp/l8\r\nBXRuR++z0VaF6l/GxL1IE7323/cU5ZohD0+xavdJftf3d6h2hJe+48oWjqPI\r\nS+zms9c2dCt1A0FX5Ip/gIFs5MI6gXDkl927QxfIVnmDgjpwPqm+h53YgG74\r\nuPBScU3XQJWVz47Zkp/dTugNR6bX9PoGvxTSsCWyJHUQe05I9pMpWLmo5kDe\r\nV1/yYMrIUSdenvUyBD2Z8sEKRs0BYhAe0jwLX996LOpl/cnBN+E9z/enDTSY\r\nepDE3R1i+tBmN3p8aWG2CKbwHhT/uhqC3WhXRSmuEGB56TGwzSOsJ0TvpheK\r\nfimcx4VlBrqaP6basE/f4v2ZsAZR+9M6paEi7igYpOdNUjFGRiXcqg01TDby\r\ny88MEC5NN46YWTORb3x0F7kkp+6T+6DsqUVRrKLY/e8389Ee4KqR3tzKbtm3\r\nfTkbSyqqTGZpCtHh47VdQOdtaFIYvTMzRAQ=\r\n=xLpd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anuragroy","email":"anuragroy@duck.com"},"maintainers":[{"name":"anuragroy","email":"anuragroy@duck.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tailwindcss-animate_1.0.6_1682142200603_0.7502782576957523"},"_hasShrinkwrap":false}},"time":{"created":"2022-11-02T22:08:47.881Z","1.0.5":"2022-11-02T22:08:48.122Z","modified":"2023-04-22T05:43:20.868Z","1.0.6":"2023-04-22T05:43:20.755Z"},"maintainers":[{"name":"anuragroy","email":"anuragroy@duck.com"}],"description":"A Tailwind CSS plugin for creating beautiful animations.","homepage":"https://github.com/anurag-roy/tailwindcss-animate#readme","keywords":["tailwind","tailwindcss","css","postcss","plugin","animation","transition","animate","animated","animatecss","animate.css","fade","slide","zoom","spin","opacity","transform","translate","scale"],"repository":{"type":"git","url":"git+https://github.com/anurag-roy/tailwindcss-animate.git"},"author":{"name":"Jamie Kyle","email":"me@thejameskyle.com"},"bugs":{"url":"https://github.com/anurag-roy/tailwindcss-animate/issues"},"license":"MIT","readme":"# `@anuragroy/tailwindcss-animate`\n\n> A Tailwind CSS plugin for creating beautiful animations.\n\nThis is a fork of [Jamie Kyle's tailwindcss-animate plugin](https://github.com/jamiebuilds/tailwindcss-animate).\n\nI have just prefixed all the classes that were overlapping with Tailwind's transition utility ones, because I found they were adding unwanted styles and behaviour.\n\nChanged classes are `duration`, `delay` and `ease`.\n\nSo for example\n\n- `duration-300` becomes `anim-duration-300`, etc.\n- `delay-150` becomes `anim-delay-150`, etc.\n- `ease-in` becomes `anim-ease-in`, etc.\n\n```html\n<!-- Add an animated fade and zoom entrance -->\n<div class=\"animate-in fade-in zoom-in\">...</div>\n\n<!-- Add an animated slide to top-left exit -->\n<div class=\"animate-out slide-out-to-top slide-out-to-left\">...</div>\n\n<!-- Control animation duration -->\n<div class=\"... anim-duration-300\">...</div>\n\n<!-- Control animation delay -->\n<div class=\"... anim-delay-150\">...</div>\n\n<!-- And so much more! -->\n```\n\n## Installation\n\nInstall the plugin from npm:\n\n```sh\nnpm install -D @anuragroy/tailwindcss-animate\n```\n\nThen add the plugin to your `tailwind.config.js` file:\n\n```js\n// @filename tailwind.config.js\nmodule.exports = {\n\ttheme: {\n\t\t// ...\n\t},\n\tplugins: [\n\t\trequire(\"@anuragroy/tailwindcss-animate\"),\n\t\t// ...\n\t],\n}\n```\n\n## Documentation\n\n- [Basic Usage](#basic-usage)\n  - [Changing animation delay](#changing-animation-delay)\n  - [Changing animation direction](#changing-animation-direction)\n  - [Changing animation duration](#changing-animation-duration)\n  - [Changing animation fill mode](#changing-animation-fill-mode)\n  - [Changing animation iteration count](#changing-animation-iteration-count)\n  - [Changing animation play state](#changing-animation-play-state)\n  - [Changing animation timing function](#changing-animation-timing-function)\n  - [Prefers-reduced-motion](#prefers-reduced-motion)\n- [Enter & Exit Animations](#enter-and-exit-animations)\n  - [Adding enter animations](#adding-enter-animations)\n  - [Adding exit animations](#adding-exit-animations)\n  - [Changing enter animation starting opacity](#changing-enter-animation-starting-opacity)\n  - [Changing enter animation starting rotation](#changing-enter-animation-starting-rotation)\n  - [Changing enter animation starting scale](#changing-enter-animation-starting-scale)\n  - [Changing enter animation starting translate](#changing-enter-animation-starting-translate)\n  - [Changing exit animation ending opacity](#changing-exit-animation-ending-opacity)\n  - [Changing exit animation ending rotation](#changing-exit-animation-ending-rotation)\n  - [Changing exit animation ending scale](#changing-exit-animation-ending-scale)\n  - [Changing exit animation ending translate](#changing-exit-animation-ending-translate)\n\n### Basic Usage\n\n#### Changing animation delay\n\nUse the `anim-delay-{amount}` utilities to control an element’s `animation-delay`.\n\n```html\n<button class=\"animate-bounce anim-delay-150 anim-duration-300 ...\">\n\tButton A\n</button>\n<button class=\"animate-bounce anim-delay-300 anim-duration-300 ...\">\n\tButton B\n</button>\n<button class=\"animate-bounce anim-delay-700 anim-duration-300 ...\">\n\tButton C\n</button>\n```\n\nLearn more in the [animation delay](/docs/animation-delay.md) documentation.\n\n#### Changing animation direction\n\nUse the `direction-{keyword}` utilities to control an element’s `animation-delay`.\n\n```html\n<button class=\"animate-bounce direction-normal ...\">Button A</button>\n<button class=\"animate-bounce direction-reverse ...\">Button B</button>\n<button class=\"animate-bounce direction-alternate ...\">Button C</button>\n<button class=\"animate-bounce direction-alternate-reverse ...\">Button C</button>\n```\n\nLearn more in the [animation direction](/docs/animation-direction.md) documentation.\n\n#### Changing animation duration\n\nUse the `anim-duration-{amount}` utilities to control an element’s `animation-duration`.\n\n```html\n<button class=\"animate-bounce anim-duration-150 ...\">Button A</button>\n<button class=\"animate-bounce anim-duration-300 ...\">Button B</button>\n<button class=\"animate-bounce anim-duration-700 ...\">Button C</button>\n```\n\nLearn more in the [animation duration](/docs/animation-duration.md) documentation.\n\n#### Changing animation fill mode\n\nUse the `fill-mode-{keyword}` utilities to control an element’s `animation-fill-mode`.\n\n```html\n<button class=\"animate-bounce fill-mode-none ...\">Button A</button>\n<button class=\"animate-bounce fill-mode-forwards ...\">Button B</button>\n<button class=\"animate-bounce fill-mode-backwards ...\">Button C</button>\n<button class=\"animate-bounce fill-mode-both ...\">Button C</button>\n```\n\nLearn more in the [animation fill mode](/docs/animation-fill-mode.md) documentation.\n\n#### Changing animation iteration count\n\nUse the `repeat-{amount}` utilities to control an element’s `animation-iteration-count`.\n\n```html\n<button class=\"animate-bounce repeat-0 ...\">Button A</button>\n<button class=\"animate-bounce repeat-1 ...\">Button B</button>\n<button class=\"animate-bounce repeat-infinite ...\">Button C</button>\n```\n\nLearn more in the [animation iteration count](/docs/animation-iteration-count.md) documentation.\n\n#### Changing animation play state\n\nUse the `running` and `paused` utilities to control an element’s `animation-play-state`.\n\n```html\n<button class=\"animate-bounce running ...\">Button B</button>\n<button class=\"animate-bounce paused ...\">Button A</button>\n```\n\nLearn more in the [animation play state](/docs/animation-play-state.md) documentation.\n\n#### Changing animation timing function\n\nUse the `anim-ease-{keyword}` utilities to control an element’s `animation-timing-function`.\n\n```html\n<button class=\"animate-bounce anim-ease-linear ...\">Button A</button>\n<button class=\"animate-bounce anim-ease-in ...\">Button B</button>\n<button class=\"animate-bounce anim-ease-out ...\">Button C</button>\n<button class=\"animate-bounce anim-ease-in-out ...\">Button C</button>\n```\n\nLearn more in the [animation timing function](/docs/animation-timing-function.md) documentation.\n\n#### Prefers-reduced-motion\n\nFor situations where the user has specified that they prefer reduced motion, you can conditionally apply animations and transitions using the `motion-safe` and `motion-reduce` variants:\n\n```html\n<button class=\"motion-safe:animate-bounce ...\">Button B</button>\n```\n\n### Enter & Exit Animations\n\n### Adding enter animations\n\nTo give an element an enter animation, use the `animate-in` utility, in combination with some [`fade-in`](/docs/enter-animation-scale.md), [`spin-in`](/docs/enter-animation-rotate.md), [`zoom-in`](/docs/enter-animation-scale.md), and [`slide-in-from`](/docs/enter-animation-translate.md) utilities.\n\n```html\n<button class=\"animate-in fade-in ...\">Button A</button>\n<button class=\"animate-in spin-in ...\">Button B</button>\n<button class=\"animate-in zoom-in ...\">Button C</button>\n<button class=\"animate-in slide-in-from-top ...\">Button D</button>\n<button class=\"animate-in slide-in-from-left ...\">Button E</button>\n```\n\nLearn more in the [enter animation](/docs/enter-animation.md) documentation.\n\n### Adding exit animations\n\nTo give an element an exit animation, use the `animate-out` utility, in combination with some [`fade-out`](/docs/exit-animation-scale.md), [`spin-out`](/docs/exit-animation-rotate.md), [`zoom-out`](/docs/exit-animation-scale.md), and [`slide-out-from`](/docs/exit-animation-translate.md) utilities.\n\n```html\n<button class=\"animate-out fade-out ...\">Button A</button>\n<button class=\"animate-out spin-out ...\">Button B</button>\n<button class=\"animate-out zoom-out ...\">Button C</button>\n<button class=\"animate-out slide-out-from-top ...\">Button D</button>\n<button class=\"animate-out slide-out-from-left ...\">Button E</button>\n```\n\nLearn more in the [exit animation](/docs/exit-animation.md) documentation.\n\n#### Changing enter animation starting opacity\n\nSet the starting opacity of an animation using the `fade-in-{amount}` utilities.\n\n```html\n<button class=\"animate-in fade-in ...\">Button A</button>\n<button class=\"animate-in fade-in-25 ...\">Button B</button>\n<button class=\"animate-in fade-in-50 ...\">Button C</button>\n<button class=\"animate-in fade-in-75 ...\">Button C</button>\n```\n\nLearn more in the [enter animation opacity](/docs/enter-animation-opacity.md) documentation.\n\n#### Changing enter animation starting rotation\n\nSet the starting rotation of an animation using the `spin-in-{amount}` utilities.\n\n```html\n<button class=\"animate-in spin-in-1 ...\">Button A</button>\n<button class=\"animate-in spin-in-6 ...\">Button B</button>\n<button class=\"animate-in spin-in-75 ...\">Button C</button>\n<button class=\"animate-in spin-in-90 ...\">Button C</button>\n```\n\nLearn more in the [enter animation rotate](/docs/enter-animation-rotate.md) documentation.\n\n#### Changing enter animation starting scale\n\nSet the starting scale of an animation using the `zoom-in-{amount}` utilities.\n\n```html\n<button class=\"animate-in zoom-in ...\">Button A</button>\n<button class=\"animate-in zoom-in-50 ...\">Button B</button>\n<button class=\"animate-in zoom-in-75 ...\">Button C</button>\n<button class=\"animate-in zoom-in-95 ...\">Button C</button>\n```\n\nLearn more in the [enter animation scale](/docs/enter-animation-scale.md) documentation.\n\n#### Changing enter animation starting translate\n\nSet the starting translate of an animation using the `slide-in-from-{direction}-{amount}` utilities.\n\n```html\n<button class=\"animate-in slide-in-from-top ...\">Button A</button>\n<button class=\"animate-in slide-in-from-bottom-48 ...\">Button B</button>\n<button class=\"animate-in slide-in-from-left-72 ...\">Button C</button>\n<button class=\"animate-in slide-in-from-right-96 ...\">Button C</button>\n```\n\nLearn more in the [enter animation translate](/docs/enter-animation-translate.md) documentation.\n\n#### Changing exit animation ending opacity\n\nSet the ending opacity of an animation using the `fade-out-{amount}` utilities.\n\n```html\n<button class=\"animate-out fade-out ...\">Button A</button>\n<button class=\"animate-out fade-out-25 ...\">Button B</button>\n<button class=\"animate-out fade-out-50 ...\">Button C</button>\n<button class=\"animate-out fade-out-75 ...\">Button C</button>\n```\n\nLearn more in the [exit animation opacity](/docs/exit-animation-opacity.md) documentation.\n\n#### Changing exit animation ending rotation\n\nSet the ending rotation of an animation using the `spin-out-{amount}` utilities.\n\n```html\n<button class=\"animate-out spin-out-1 ...\">Button A</button>\n<button class=\"animate-out spin-out-6 ...\">Button B</button>\n<button class=\"animate-out spin-out-75 ...\">Button C</button>\n<button class=\"animate-out spin-out-90 ...\">Button C</button>\n```\n\nLearn more in the [exit animation rotate](/docs/exit-animation-rotate.md) documentation.\n\n#### Changing exit animation ending scale\n\nSet the ending scale of an animation using the `zoom-out-{amount}` utilities.\n\n```html\n<button class=\"animate-out zoom-out ...\">Button A</button>\n<button class=\"animate-out zoom-out-50 ...\">Button B</button>\n<button class=\"animate-out zoom-out-75 ...\">Button C</button>\n<button class=\"animate-out zoom-out-95 ...\">Button C</button>\n```\n\nLearn more in the [exit animation scale](/docs/exit-animation-scale.md) documentation.\n\n#### Changing exit animation ending translate\n\nSet the ending translate of an animation using the `slide-out-to-{direction}-{amount}` utilities.\n\n```html\n<button class=\"animate-out slide-out-to-top ...\">Button A</button>\n<button class=\"animate-out slide-out-to-bottom-48 ...\">Button B</button>\n<button class=\"animate-out slide-out-to-left-72 ...\">Button C</button>\n<button class=\"animate-out slide-out-to-right-96 ...\">Button C</button>\n```\n\nLearn more in the [exit animation translate](/docs/exit-animation-translate.md) documentation.\n","readmeFilename":"README.md"}