{"_id":"tailwind-animationfound","name":"tailwind-animationfound","dist-tags":{"latest":"2.3.7"},"versions":{"2.3.7":{"name":"tailwind-animationfound","description":"Excellent animation utilities of TailwindCSS","author":{"name":"new-data-services"},"license":"MIT","keywords":["tailwindcss","tailwind","plugin","animation","animated","keyframes","animationfound"],"main":"src/index.js","types":"src/index.d.ts","style":"src/index.css","scripts":{"watch":"npm run dev -- -w","dev":"npx @tailwindcss/cli -i resources/app.css -o public/app.css","test":"jest --setupFilesAfterEnv '/jest/customMatchers.js'","lint":"npx eslint {src,jest}/**","lint:fix":"npx eslint {src,jest}/** --fix"},"peerDependencies":{"tailwindcss":">=3.1.0 || >=4.0.0"},"devDependencies":{"@eslint/js":"^9.18.0","@tailwindcss/cli":"^4.0.0","@tailwindcss/postcss":"^4.0.0","eslint":"^9.18.0","eslint-plugin-jest":"^28.11.0","jest":"^29.7.0","postcss":"^8.5.1","tailwindcss":"^4.0.0","typescript":"^5.7.3"},"version":"2.3.7","_id":"tailwind-animationfound@2.3.7","_nodeVersion":"22.0.0","_npmVersion":"10.5.1","dist":{"integrity":"sha512-QKrbkN5f2LJeb+wcnXIIq2D3BZzcuAzgp8kSOAlxhEkc4lFxqocnhJFqRSaCoCN1UbEQDml8Cq0rrZWh3dTD8g==","shasum":"d9e850a70c85d424636e6e702f02a0b25eb94940","tarball":"https://registry.npmjs.org/tailwind-animationfound/-/tailwind-animationfound-2.3.7.tgz","fileCount":25,"unpackedSize":39632,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCCakMRxnfMZDxQzhr6eL9o0YfU9T0yViOrp4l7LyhaqAIhAJzDVBwjPO0rfKoqJ7UhHtU0tqbjskTTL8PoK0n3325n"}]},"_npmUser":{"name":"kaliyahb","email":"Kaliyahb6324@outlook.com"},"directories":{},"maintainers":[{"name":"kaliyahb","email":"Kaliyahb6324@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tailwind-animationfound_2.3.7_1778002933042_0.4121596369143692"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-05T17:42:13.041Z","2.3.7":"2026-05-05T17:42:13.218Z","modified":"2026-05-05T17:42:13.444Z"},"maintainers":[{"name":"kaliyahb","email":"Kaliyahb6324@outlook.com"}],"description":"Excellent animation utilities of TailwindCSS","keywords":["tailwindcss","tailwind","plugin","animation","animated","keyframes","animationfound"],"author":{"name":"new-data-services"},"license":"MIT","readme":"# Tailwind CSS animationfound\n\nExcellent animation utilities of TailwindCSS
\n\n\n## Installation\n\nFirst, install the plugin via npm:\n\n```sh\nnpm install tailwindcss-animationfound\n```\n\n## Import\n\nSecond, import it alongside Tailwind CSS in your CSS file:\n\n```css\n/* tailwind css v4.x */\n@import \"tailwindcss\";\n@import \"tailwindcss-animationfound\";\n```\n\nOr, if you are using **Tailwind CSS v3.x** or the legacy JavaScript configuration file, import the plugin like this:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n // ...\n plugins: [\n require('tailwindcss-animationfound')\n ],\n}\n```\n\n## Usage\n\nThis plugin gives some utility classes and give automatic animations. Here are some examples:\n\n```html\n\n\n\n```\n\n### Ready-to-use animations\n\nThere are several animations that can be integrated with a single utility class. These extend the Spin, Ping and Pulse animations of Tailwind CSS.\n\nOpen the configurator to see them in action:
\nhttps://tailwindcss-animationfound.com/configurator.html\n\nAll animations can be customized with the utility classes below.\n\n### Duration\n\n| Class | Properties |\n|-----|-----|\n| animate-duration-75 | animation-duration: 75ms; |\n| animate-duration-100 | animation-duration: 100ms; |\n| animate-duration-150 | animation-duration: 150ms; |\n| animate-duration-200 | animation-duration: 200ms; |\n| animate-duration-300 | animation-duration: 300ms; |\n| animate-duration-500 | animation-duration: 500ms; |\n| animate-duration-700 | animation-duration: 700ms; |\n| animate-duration-1000 | animation-duration: 1000ms; |\n| animate-duration-[*\\*] | animation-duration: *\\* ms; |\n| animate-duration-*\\* [*](#custom-properties-and-bare-values) | animation-duration: *\\* ms; |\n| animate-duration-(*\\*) [*](#custom-properties-and-bare-values) | animation-duration: var(*\\*); |\n\n### Delay\n\n| Class | Properties |\n|-----|-----|\n| animate-delay-none | animation-delay: 0ms; |\n| animate-delay-75 | animation-delay: 75ms; |\n| animate-delay-100 | animation-delay: 100ms; |\n| animate-delay-150 | animation-delay: 150ms; |\n| animate-delay-200 | animation-delay: 200ms; |\n| animate-delay-300 | animation-delay: 300ms; |\n| animate-delay-500 | animation-delay: 500ms; |\n| animate-delay-700 | animation-delay: 700ms; |\n| animate-delay-1000 | animation-delay: 1000ms; |\n| animate-delay-[*\\*] | animation-delay: *\\* ms; |\n| animate-delay-*\\* [*](#custom-properties-and-bare-values) | animation-delay: *\\* ms; |\n| animate-delay-(*\\*) [*](#custom-properties-and-bare-values) | animation-delay: var(*\\*); |\n\n### Direction\n\n| Class | Properties |\n|-----|-----|\n| animate-normal | animation-direction: normal; |\n| animate-reverse | animation-direction: reverse; |\n| animate-alternate | animation-direction: alternate; |\n| animate-alternate-reverse | animation-direction: alternate-reverse; |\n\n### Iteration Count\n\n| Class | Properties |\n|-----|-----|\n| animate-infinite | animation-iteration-count: infinite; |\n| animate-once | animation-iteration-count: 1; |\n| animate-twice | animation-iteration-count: 2; |\n| animate-thrice | animation-iteration-count: 3; |\n| animate-iteration-[*\\*] | animation-iteration-count: *\\*; |\n| animate-iteration-*\\* [*](#custom-properties-and-bare-values) | animation-iteration-count: *\\*; |\n| animate-iteration-(*\\*) [*](#custom-properties-and-bare-values) | animation-iteration-count: var(*\\*); |\n\n### Timing Function\n\n| Class | Properties |\n|-----|-----|\n| animate-ease | animation-timing-function: ease; |\n| animate-ease-linear | animation-timing-function: linear; |\n| animate-ease-in | animation-timing-function: cubic-bezier(0.4, 0, 1, 1); |\n| animate-ease-out | animation-timing-function: cubic-bezier(0, 0, 0.2, 1); |\n| animate-ease-in-out | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); |\n| animate-ease-[*\\*] | animation-timing-function: *\\*; |\n| animate-ease-(*\\*) [*](#custom-properties-and-bare-values) | animation-timing-function: var(*\\*); |\n\n### Fill Mode\n\n| Class | Properties |\n|-----|-----|\n| animate-fill-none | animation-fill-mode: normal; |\n| animate-fill-forwards | animation-fill-mode: forwards; |\n| animate-fill-backwards | animation-fill-mode: backwards; |\n| animate-fill-both | animation-fill-mode: both; |\n\n### Play State\n\n| Class | Properties |\n|-----|-----|\n| animate-run | animation-play-state: running; |\n| animate-play | animation-play-state: running; |\n| animate-stop | animation-play-state: paused; |\n| animate-pause | animation-play-state: paused; |\n\n### Composition\n\n| Class | Properties |\n|-----|-----|\n| animate-replace | animation-composition: replace; |\n| animate-add | animation-composition: add; |\n| animate-accumulate | animation-composition: accumulate; |\n\n## Variant modifiers and breakpoints\n\nAll variants and breakpoints (hover, focus, lg, ...) work with animations und animation utility classes.\n\n```html\n
\n \n
\n```\n\n## Arbitrary values\n\nOf course, you can use arbitrary values for animations ultilities:\n\n```html\n
\n \n
\n```\n\n## Custom properties and bare values\n\nWith **Tailwind CSS v4.0** or newer you can use the shorthand syntax for custom properties. Bare values for delay, duration and iteration utilities also work.\n\n```html\n
\n \n
\n```\n\nMore information on the new arbitrary value syntax can be found in the [Tailwind CSS Docs](https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values).\n\n## Override default values\n\nAll animations come with default values for duration, delay and timing function. If you want to overwrite these values globally, you can set the following CSS properties:\n\n```css\n:root {\n --default-animation-duration: 500ms;\n --default-animation-delay: 0s;\n --default-animation-timing-function: ease;\n}\n```\n\n## FAQ\n\n### How to animate on scroll?\n\nTo run animations when an element enters the viewport, you need JavaScript. (At least until [animation-timeline](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline) has good browser support)\n\nA good starting point for a JavaScript solution would be the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). Or tools that build on it, such as the [Alpine.js Intersect plugin](https://alpinejs.dev/plugins/intersect) and the [Tailwind CSS Intersection plugin](https://github.com/heidkaemper/tailwindcss-intersect), to name just two.\n\n### How to combine multiple animations?\n\nThe simplest approach is to nest two elements:\n\n```html\n
\n
\n
\n```\n\n### Can keyframes and offset values be changed?\n\nOffset positions of predefined animations can't be changed on the fly. But the behavior can still be modified with [animation-composition](#composition) utilities.\n\nIf you need more details on how compositions work, check out the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-composition).\n\n### Does this work with the Play CDN?\n\nUnfortunately not. The Tailwind CSS Play CDN currently does not support third-party plugins.\n\n---\n\n\n\n\n","readmeFilename":"README.md","_rev":"1-5adb80a9a99e34524c8b1788eec7f5d8"}