{"id":15511829,"url":"https://github.com/benface/tailwindcss-animations","last_synced_at":"2025-10-12T08:32:03.945Z","repository":{"id":96092735,"uuid":"211669872","full_name":"benface/tailwindcss-animations","owner":"benface","description":"[DEPRECATED] Tailwind CSS plugin to generate animation utilities","archived":true,"fork":false,"pushed_at":"2020-08-04T23:06:33.000Z","size":297,"stargazers_count":98,"open_issues_count":0,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-29T02:15:45.830Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benface.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-29T13:47:58.000Z","updated_at":"2023-01-28T13:04:28.000Z","dependencies_parsed_at":"2023-05-03T14:32:05.076Z","dependency_job_id":null,"html_url":"https://github.com/benface/tailwindcss-animations","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benface%2Ftailwindcss-animations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benface%2Ftailwindcss-animations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benface%2Ftailwindcss-animations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benface%2Ftailwindcss-animations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benface","download_url":"https://codeload.github.com/benface/tailwindcss-animations/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236188360,"owners_count":19109394,"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":[],"created_at":"2024-10-02T09:53:14.930Z","updated_at":"2025-10-12T08:32:03.631Z","avatar_url":"https://github.com/benface.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Animations \u0026 Transitions"],"sub_categories":[],"readme":"# ⛔️ DEPRECATED\n\nTailwind CSS 1.6 (released in July 2020) has [animation utilities](https://tailwindcss.com/docs/animation) built-in, so I am discontinuing this plugin. Feel free to fork it if you want, but I recommend migrating to Tailwind’s official solution and write custom utilities for `animation-duration` and other specific properties when needed.\n\n# Animations Plugin for Tailwind CSS\n\n## Requirements\n\nThis plugin requires Tailwind CSS 1.2 or later. If your project uses an older version of Tailwind, you should install the latest 1.x version of this plugin (`npm install tailwindcss-animations@1.x`).\n\n## Installation\n\n```bash\nnpm install tailwindcss-animations\n```\n\n## Usage\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    animations: { // defaults to {}; the following are examples\n      'spin': {\n        from: {\n          transform: 'rotate(0deg)',\n        },\n        to: {\n          transform: 'rotate(360deg)',\n        },\n      },\n      'jump': {\n        '0%': {\n          transform: 'translateY(0%)',\n        },\n        '50%': {\n          transform: 'translateY(-100%)',\n        },\n        '100%': {\n          transform: 'translateY(0%)',\n        },\n      },\n    },\n    animationDuration: { // defaults to these values\n      'default': '1s',\n      '0s': '0s',\n      '1s': '1s',\n      '2s': '2s',\n      '3s': '3s',\n      '4s': '4s',\n      '5s': '5s',\n    },\n    animationTimingFunction: { // defaults to these values\n      'default': 'ease',\n      'linear': 'linear',\n      'ease': 'ease',\n      'ease-in': 'ease-in',\n      'ease-out': 'ease-out',\n      'ease-in-out': 'ease-in-out',\n    },\n    animationDelay: { // defaults to these values\n      'default': '0s',\n      '0s': '0s',\n      '1s': '1s',\n      '2s': '2s',\n      '3s': '3s',\n      '4s': '4s',\n      '5s': '5s',\n    },\n    animationIterationCount: { // defaults to these values\n      'default': 'infinite',\n      'once': '1',\n      'infinite': 'infinite',\n    },\n    animationDirection: { // defaults to these values\n      'default': 'normal',\n      'normal': 'normal',\n      'reverse': 'reverse',\n      'alternate': 'alternate',\n      'alternate-reverse': 'alternate-reverse',\n    },\n    animationFillMode: { // defaults to these values\n      'default': 'none',\n      'none': 'none',\n      'forwards': 'forwards',\n      'backwards': 'backwards',\n      'both': 'both',\n    },\n    animationPlayState: { // defaults to these values\n      'running': 'running',\n      'paused': 'paused',\n    },\n  },\n  variants: { // all the following default to ['responsive']\n    animations: ['responsive'],\n    animationDuration: ['responsive'],\n    animationTimingFunction: ['responsive'],\n    animationDelay: ['responsive'],\n    animationIterationCount: ['responsive'],\n    animationDirection: ['responsive'],\n    animationFillMode: ['responsive'],\n    animationPlayState: ['responsive'],\n  },\n  plugins: [\n    require('tailwindcss-animations'),\n  ],\n};\n```\n\nThe above configuration would generate the following CSS:\n\n```css\n/* @tailwind base */\n\n/* base styles for the default animation duration, timing function, delay, iteration count, direction, and fill mode (when they differ from the CSS defaults) */\n*, *::before, *::after {\n  --animation-duration: 1s;\n  --animation-iteration-count: infinite;\n  /* when the default timing function is a value other than \"ease\": */\n  --animation-timing-function: [default-timing-function];\n  /* when the default delay is a value other than zero: */\n  --animation-delay: [default-delay];\n  /* when the default direction is a value other than \"normal\": */\n  --animation-direction: [default-direction];\n  /* when the default fill mode is a value other than \"none\": */\n  --animation-fill-mode: [default-fill-mode];\n}\n\n/* configurable with the \"animations\" theme object */\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes jump {\n  0% {\n    transform: translateY(0%);\n  }\n  50% {\n    transform: translateY(-100%);\n  }\n  100% {\n    transform: translateY(0%);\n  }\n}\n\n/* @tailwind utilities */\n\n.animation-none {\n  animation-name: none;\n}\n.animation-spin {\n  animation-name: spin;\n  animation-duration: 1s;\n  animation-duration: var(--animation-duration);\n  animation-iteration-count: infinite;\n  animation-iteration-count: var(--animation-iteration-count);\n}\n.animation-jump {\n  animation-name: jump;\n  animation-duration: 1s;\n  animation-duration: var(--animation-duration);\n  animation-iteration-count: infinite;\n  animation-iteration-count: var(--animation-iteration-count);\n}\n.animation-[name] {\n  animation-name: [name];\n  /* when the default duration is a value other than zero: */\n  animation-duration: [default-duration];\n  animation-duration: var(--animation-duration);\n  /* when the default timing function is a value other than \"ease\": */\n  animation-timing-function: [default-timing-function];\n  animation-timing-function: var(--animation-timing-function);\n  /* when the default delay is a value other than zero: */\n  animation-delay: [default-delay];\n  animation-delay: var(--animation-delay);\n  /* when the default iteration count is a value other than \"1\": */\n  animation-iteration-count: [default-iteration-count];\n  animation-iteration-count: var(--animation-iteration-count);\n  /* when the default direction is a value other than \"normal\": */\n  animation-direction: [default-direction];\n  animation-direction: var(--animation-direction);\n  /* when the default fill mode is a value other than \"none\": */\n  animation-fill-mode: [default-fill-mode];\n  animation-fill-mode: var(--animation-fill-mode);\n}\n\n/* configurable with the \"animationDuration\" theme object */\n.animation-0s {\n  --animation-duration: 0s;\n  animation-duration: 0s;\n  animation-duration: var(--animation-duration);\n}\n.animation-1s {\n  --animation-duration: 1s;\n  animation-duration: 1s;\n  animation-duration: var(--animation-duration);\n}\n.animation-[duration-key] {\n  animation-duration: [duration-value];\n  /* when the default duration is a value other than zero: */\n  --animation-duration: [duration-value];\n  animation-duration: var(--animation-duration);\n}\n\n/* configurable with the \"animationTimingFunction\" theme object */\n.animation-linear {\n  animation-timing-function: linear;\n}\n.animation-ease {\n  animation-timing-function: ease;\n}\n.animation-[timing-function-key] {\n  animation-timing-function: [timing-function-value];\n  /* when the default timing function is a value other than \"ease\": */\n  --animation-timing-function: [timing-function-value];\n  animation-timing-function: var(--animation-timing-function);\n}\n\n/* configurable with the \"animationDelay\" theme object */\n.animation-delay-0s {\n  animation-delay: 0s;\n}\n.animation-delay-1s {\n  animation-delay: 1s;\n}\n.animation-delay-[key] {\n  animation-delay: [value];\n  /* when the default delay is a value other than zero: */\n  --animation-delay: [value];\n  animation-delay: var(--animation-delay);\n}\n\n/* configurable with the \"animationIterationCount\" theme object */\n.animation-once {\n  --animation-iteration-count: 1;\n  animation-iteration-count: 1;\n  animation-iteration-count: var(--animation-iteration-count);\n}\n.animation-infinite {\n  --animation-iteration-count: infinite;\n  animation-iteration-count: infinite;\n  animation-iteration-count: var(--animation-iteration-count);\n}\n.animation-[iteration-count-key] {\n  animation-iteration-count: [iteration-count-value];\n  /* when the default iteration count is a value other than \"1\": */\n  --animation-iteration-count: [iteration-count-value];\n  animation-iteration-count: var(--animation-iteration-count);\n}\n\n/* configurable with the \"animationDirection\" theme object */\n.animation-normal {\n  animation-direction: normal;\n}\n.animation-reverse {\n  animation-direction: reverse;\n}\n.animation-[direction-key] {\n  animation-direction: [direction-value];\n  /* when the default direction is a value other than \"normal\": */\n  --animation-direction: [direction-value];\n  animation-direction: var(--animation-direction);\n}\n\n/* configurable with the \"animationFillMode\" theme object */\n.animation-fill-none {\n  animation-fill-mode: none;\n}\n.animation-fill-forwards {\n  animation-fill-mode: forwards;\n}\n.animation-fill-[key] {\n  animation-fill-mode: [value];\n  /* when the default fill mode is a value other than \"none\": */\n  --animation-fill-mode: [value];\n  animation-fill-mode: var(--animation-fill-mode);\n}\n\n/* configurable with the \"animationPlayState\" theme object */\n.animation-running {\n  animation-play-state: running;\n}\n.animation-paused {\n  animation-play-state: paused;\n}\n```\n\nNote: The `animationDuration`, `animationTimingFunction`, `animationDelay`, `animationIterationCount`, `animationDirection`, and `animationFillMode` theme objects accept a `default` key that doesn’t generate any class; it is used to define a custom property on all elements and pseudo-elements (`*, *::before, *::after`) if the value differs from the CSS-defined default. These custom properties are then used to set actual properties on elements that have a `animation-[name]` class, so that you don’t have to specify the same classes every time.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenface%2Ftailwindcss-animations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenface%2Ftailwindcss-animations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenface%2Ftailwindcss-animations/lists"}