{"id":45322352,"url":"https://github.com/akbaruddin/tailwindcss-plugin-animation-delay","last_synced_at":"2026-02-21T08:17:39.006Z","repository":{"id":48792020,"uuid":"517030384","full_name":"akbaruddin/tailwindcss-plugin-animation-delay","owner":"akbaruddin","description":"Tailwind CSS plugin, add animation-delay CSS property ","archived":false,"fork":false,"pushed_at":"2022-07-23T12:34:56.000Z","size":22,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-04T21:24:31.061Z","etag":null,"topics":["animation","animation-delay","delay","plugin","tailwind","tailwindcss","tailwindcss-animation-delay","tailwindcss-plugin","tailwindcss-plugin-animation-delay"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/tailwindcss-plugin-animation-delay","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/akbaruddin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"akbaruddin","patreon":"akbaruddin"}},"created_at":"2022-07-23T10:47:21.000Z","updated_at":"2023-07-01T11:51:56.000Z","dependencies_parsed_at":"2022-09-17T10:20:11.547Z","dependency_job_id":null,"html_url":"https://github.com/akbaruddin/tailwindcss-plugin-animation-delay","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/akbaruddin/tailwindcss-plugin-animation-delay","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbaruddin%2Ftailwindcss-plugin-animation-delay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbaruddin%2Ftailwindcss-plugin-animation-delay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbaruddin%2Ftailwindcss-plugin-animation-delay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbaruddin%2Ftailwindcss-plugin-animation-delay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akbaruddin","download_url":"https://codeload.github.com/akbaruddin/tailwindcss-plugin-animation-delay/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbaruddin%2Ftailwindcss-plugin-animation-delay/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29677218,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T06:23:40.028Z","status":"ssl_error","status_checked_at":"2026-02-21T06:23:39.222Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","animation-delay","delay","plugin","tailwind","tailwindcss","tailwindcss-animation-delay","tailwindcss-plugin","tailwindcss-plugin-animation-delay"],"created_at":"2026-02-21T08:17:38.180Z","updated_at":"2026-02-21T08:17:39.000Z","avatar_url":"https://github.com/akbaruddin.png","language":"JavaScript","readme":"# Tailwindcss `animation-delay` plugin\n\nTailwind CSS plugin, add `animation-delay` CSS property.\n\n## Installation\n\nInstall the plugin from npm:\n\n```sh\n# Using npm\nnpm install tailwindcss-plugin-animation-delay\n\n# Using Yarn\nyarn add tailwindcss-plugin-animation-delay\n\n# Using pnpm\npnpm install tailwindcss-plugin-animation-delay\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    require(\"tailwindcss-plugin-animation-delay\"),\n    // ...\n  ],\n};\n```\n\n## Usage\n\n`animation-delay-{n}` or `-animation-delay-{n}` or `animation-delay-[arbitrary_values]` class to specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.\n\n```html\n\u003csvg class=\"animate-bounce animation-delay-300 w-6 h-6 ...\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/svg\u003e\n```\n\n### Normal\n\n| Class                | Properties               |\n| -------------------- | ------------------------ |\n| animation-delay-none | animation-delay: 0s;     |\n| animation-delay-25   | animation-delay: 25ms;   |\n| animation-delay-50   | animation-delay: 50ms;   |\n| animation-delay-75   | animation-delay: 75ms;   |\n| animation-delay-100  | animation-delay: 100ms;  |\n| animation-delay-150  | animation-delay: 150ms;  |\n| animation-delay-200  | animation-delay: 200ms;  |\n| animation-delay-300  | animation-delay: 300ms;  |\n| animation-delay-400  | animation-delay: 400ms;  |\n| animation-delay-500  | animation-delay: 500ms;  |\n| animation-delay-600  | animation-delay: 600ms;  |\n| animation-delay-700  | animation-delay: 700ms;  |\n| animation-delay-800  | animation-delay: 800ms;  |\n| animation-delay-900  | animation-delay: 900ms;  |\n| animation-delay-1000 | animation-delay: 1000ms; |\n| animation-delay-1100 | animation-delay: 1100ms; |\n| animation-delay-1200 | animation-delay: 1200ms; |\n| animation-delay-1300 | animation-delay: 1300ms; |\n| animation-delay-1400 | animation-delay: 1400ms; |\n| animation-delay-1500 | animation-delay: 1500ms; |\n| animation-delay-2000 | animation-delay: 2000ms; |\n| animation-delay-3000 | animation-delay: 3000ms; |\n| animation-delay-4000 | animation-delay: 4000ms; |\n| animation-delay-5000 | animation-delay: 5000ms; |\n| animation-delay-6000 | animation-delay: 6000ms; |\n| animation-delay-7000 | animation-delay: 7000ms; |\n| animation-delay-8000 | animation-delay: 8000ms; |\n| animation-delay-9000 | animation-delay: 9000ms; |\n\n### Negative\n\n| Class                 | Properties                |\n| --------------------- | ------------------------- |\n| -animation-delay-25   | animation-delay: -25ms;   |\n| -animation-delay-50   | animation-delay: -50ms;   |\n| -animation-delay-75   | animation-delay: -75ms;   |\n| -animation-delay-100  | animation-delay: -100ms;  |\n| -animation-delay-150  | animation-delay: -150ms;  |\n| -animation-delay-200  | animation-delay: -200ms;  |\n| -animation-delay-300  | animation-delay: -300ms;  |\n| -animation-delay-400  | animation-delay: -400ms;  |\n| -animation-delay-500  | animation-delay: -500ms;  |\n| -animation-delay-600  | animation-delay: -600ms;  |\n| -animation-delay-700  | animation-delay: -700ms;  |\n| -animation-delay-800  | animation-delay: -800ms;  |\n| -animation-delay-900  | animation-delay: -900ms;  |\n| -animation-delay-1000 | animation-delay: -1000ms; |\n| -animation-delay-1100 | animation-delay: -1100ms; |\n| -animation-delay-1200 | animation-delay: -1200ms; |\n| -animation-delay-1300 | animation-delay: -1300ms; |\n| -animation-delay-1400 | animation-delay: -1400ms; |\n| -animation-delay-1500 | animation-delay: -1500ms; |\n| -animation-delay-2000 | animation-delay: -2000ms; |\n| -animation-delay-3000 | animation-delay: -3000ms; |\n| -animation-delay-4000 | animation-delay: -4000ms; |\n| -animation-delay-5000 | animation-delay: -5000ms; |\n| -animation-delay-6000 | animation-delay: -6000ms; |\n| -animation-delay-7000 | animation-delay: -7000ms; |\n| -animation-delay-8000 | animation-delay: -8000ms; |\n| -animation-delay-9000 | animation-delay: -9000ms; |\n\n### Arbitrary values\n\n```html\n\u003csvg class=\"animate-bounce animation-delay-[10s] w-6 h-6 ...\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/svg\u003e\n```\n\n## Configuration\n\nYou can configure which values and variants are generated by this plugin under the `animationDelay` key in your tailwind.config.js file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    animationDelay: {\n      100: \"100ms\",\n      200: \"200ms\",\n      300: \"300ms\",\n      400: \"400ms\",\n    },\n  },\n  variants: {\n    animationDelay: [\"responsive\", \"hover\"],\n  },\n};\n```\n","funding_links":["https://github.com/sponsors/akbaruddin","https://patreon.com/akbaruddin"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakbaruddin%2Ftailwindcss-plugin-animation-delay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakbaruddin%2Ftailwindcss-plugin-animation-delay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakbaruddin%2Ftailwindcss-plugin-animation-delay/lists"}