{"id":15659749,"url":"https://github.com/ixkaito/tailwindcss-easing","last_synced_at":"2025-05-04T05:45:33.433Z","repository":{"id":65514200,"uuid":"387410807","full_name":"ixkaito/tailwindcss-easing","owner":"ixkaito","description":"A Tailwind CSS plugin extends `transitionTimingFunction` with easing functions from easings.net.","archived":false,"fork":false,"pushed_at":"2023-02-04T07:22:17.000Z","size":28,"stargazers_count":27,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-21T10:19:32.750Z","etag":null,"topics":["easing","tailwind","tailwindcss","transition-timing-function"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ixkaito.png","metadata":{"files":{"readme":"README.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":"2021-07-19T09:33:41.000Z","updated_at":"2024-11-01T05:21:42.000Z","dependencies_parsed_at":"2023-02-18T14:46:15.501Z","dependency_job_id":null,"html_url":"https://github.com/ixkaito/tailwindcss-easing","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/ixkaito%2Ftailwindcss-easing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ixkaito%2Ftailwindcss-easing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ixkaito%2Ftailwindcss-easing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ixkaito%2Ftailwindcss-easing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ixkaito","download_url":"https://codeload.github.com/ixkaito/tailwindcss-easing/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252133880,"owners_count":21699623,"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":["easing","tailwind","tailwindcss","transition-timing-function"],"created_at":"2024-10-03T13:18:39.590Z","updated_at":"2025-05-03T02:32:57.315Z","avatar_url":"https://github.com/ixkaito.png","language":"JavaScript","readme":"# tailwindcss-easing\n\nA Tailwind CSS plugin extends `transitionTimingFunction` and registers `animation-ease-{timing}` utilities with easing functions from [easings.net](https://easings.net/).\n\n```css\n.ease-css { transition-timing-function: ease; } /* The CSS default built-in `ease` */\n.ease-css-in { transition-timing-function: ease-in; } /* The CSS built-in `ease-in` */\n.ease-css-out { transition-timing-function: ease-out; } /* The CSS built-in `ease-out` */\n.ease-css-in-out { transition-timing-function: ease-in-out; } /* The CSS built-in `ease-in-out` */\n.ease-in-sine { transition-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }\n.ease-out-sine { transition-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }\n.ease-in-out-sine { transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }\n.ease-in-quad { transition-timing-function: cubic-bezier(0.11, 0, 0.5, 0); }\n.ease-out-quad { transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1); }\n.ease-in-out-quad { transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }\n.ease-in-cubic { transition-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }\n.ease-out-cubic { transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }\n.ease-in-out-cubic { transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }\n.ease-in-quart { transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }\n.ease-out-quart { transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }\n.ease-in-out-quart { transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1); }\n.ease-in-quint { transition-timing-function: cubic-bezier(0.64, 0, 0.78, 0); }\n.ease-out-quint { transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }\n.ease-in-out-quint { transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1); }\n.ease-in-expo { transition-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }\n.ease-out-expo { transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }\n.ease-in-out-expo { transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1); }\n.ease-in-circ { transition-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }\n.ease-out-circ { transition-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }\n.ease-in-out-circ { transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1); }\n.ease-in-back { transition-timing-function: cubic-bezier(0.36, 0, 0.66, -0.56); }\n.ease-out-back { transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }\n.ease-in-out-back { transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6); }\n\n.animation-ease-css { animation-timing-function: ease; } /* The CSS default built-in `ease` */\n.animation-ease-css-in { animation-timing-function: ease-in; } /* The CSS built-in `ease-in` */\n.animation-ease-css-out { animation-timing-function: ease-out; } /* The CSS built-in `ease-out` */\n.animation-ease-css-in-out { animation-timing-function: ease-in-out; } /* The CSS built-in `ease-in-out` */\n.animation-ease-in-sine { animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }\n.animation-ease-out-sine { animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }\n.animation-ease-in-out-sine { animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }\n.animation-ease-in-quad { animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0); }\n.animation-ease-out-quad { animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1); }\n.animation-ease-in-out-quad { animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }\n.animation-ease-in-cubic { animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }\n.animation-ease-out-cubic { animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }\n.animation-ease-in-out-cubic { animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }\n.animation-ease-in-quart { animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }\n.animation-ease-out-quart { animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }\n.animation-ease-in-out-quart { animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1); }\n.animation-ease-in-quint { animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0); }\n.animation-ease-out-quint { animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }\n.animation-ease-in-out-quint { animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1); }\n.animation-ease-in-expo { animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0); }\n.animation-ease-out-expo { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }\n.animation-ease-in-out-expo { animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1); }\n.animation-ease-in-circ { animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }\n.animation-ease-out-circ { animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }\n.animation-ease-in-out-circ { animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1); }\n.animation-ease-in-back { animation-timing-function: cubic-bezier(0.36, 0, 0.66, -0.56); }\n.animation-ease-out-back { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }\n.animation-ease-in-out-back { animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6); }\n```\n\n## Installation\n\nInstall the plugin from npm:\n\n```sh\nnpm install -D tailwindcss-easing\n```\nor\n```sh\nyarn add -D tailwindcss-easing\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-easing'),\n    // ...\n  ],\n}\n```\n\n## Usage\n\nUse the `ease-{timing}` utilities to control an element’s easing curve.\n\n```html\n\u003cbutton class=\"ease-in-out-expo ...\"\u003eButton\u003c/button\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fixkaito%2Ftailwindcss-easing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fixkaito%2Ftailwindcss-easing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fixkaito%2Ftailwindcss-easing/lists"}