{"id":16295118,"url":"https://github.com/wadackel/css-keyframer","last_synced_at":"2025-10-03T15:03:06.289Z","repository":{"id":71390995,"uuid":"62027948","full_name":"wadackel/css-keyframer","owner":"wadackel","description":"Dynamic css animation keyframes Manipulation library.","archived":false,"fork":false,"pushed_at":"2017-01-31T17:54:28.000Z","size":208,"stargazers_count":12,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-28T23:02:09.899Z","etag":null,"topics":["animation","css","css-in-js"],"latest_commit_sha":null,"homepage":"https://tsuyoshiwada.github.io/css-keyframer/","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/wadackel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2016-06-27T05:34:24.000Z","updated_at":"2024-07-18T10:34:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"1edda349-4943-41d1-948b-169d9da4da31","html_url":"https://github.com/wadackel/css-keyframer","commit_stats":null,"previous_names":["tsuyoshiwada/css-keyframer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wadackel%2Fcss-keyframer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wadackel%2Fcss-keyframer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wadackel%2Fcss-keyframer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wadackel%2Fcss-keyframer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wadackel","download_url":"https://codeload.github.com/wadackel/css-keyframer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244047647,"owners_count":20389206,"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":["animation","css","css-in-js"],"created_at":"2024-10-10T20:17:40.570Z","updated_at":"2025-10-03T15:03:05.177Z","avatar_url":"https://github.com/wadackel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://raw.githubusercontent.com/tsuyoshiwada/css-keyframer/images/logo%402x.png\" width=\"260\" height=\"44\" alt=\"css-keyframer.js\"\u003e\n================\n\n[![Build Status](http://img.shields.io/travis/tsuyoshiwada/css-keyframer.svg?style=flat-square)](https://travis-ci.org/tsuyoshiwada/css-keyframer)\n[![npm version](https://img.shields.io/npm/v/css-keyframer.svg?style=flat-square)](http://badge.fury.io/js/css-keyframer)\n[![David](https://img.shields.io/david/tsuyoshiwada/css-keyframer.svg?style=flat-square)](https://david-dm.org/tsuyoshiwada/css-keyframer/)\n\nDynamic css animation keyframes Manipulation library.\n\nSee demo page: https://tsuyoshiwada.github.io/css-keyframer/\n\n\n\n## Description\n\ncss-keyframer.js provides a Low-level API that add to the head element dynamically generates a style element.  \nTherefore, linking to the DOM element must be handled by the user side.\n\n\n\n### WHY?\n\nWhen you want to apply the same animation to multiple elements, it is inefficient to update the in-line style of all the elements.  \nIf you reuse one of `@keyframes` it can be realized efficient animation.\n\n\n\n## Install\n\nYou can install the [css-keyframer.js](https://www.npmjs.com/package/css-keyframer) from [npm](https://www.npmjs.com/).\n\n```bash\n$ npm install css-keyframer --save\n```\n\nor Download the [css-keyframer.min.js](https://raw.githubusercontent.com/tsuyoshiwada/css-keyframer/master/css-keyframer.min.js)\n\n\n\n## Getting started\n\nIn the following example, to apply the spin animation to `div.element`.\n\n```html\n\u003cdiv class=\"element\"\u003e\u003c/div\u003e\n```\n\n```javascript\nimport CSSKeyframer from \"css-keyframer\";\n\nconst keyframer = new CSSKeyframer({ /* options */ });\n\n// CSS property will be added vendor-prefix is automatically!\nkeyframer.register(\"spin\", [\n  { transform: \"rotate(0deg)\" },\n  { transform: \"rotate(360deg)\" }\n]);\n\ndocument.querySelector(\".element\").style[keyframer.animationProp.js] = \"spin 1500ms linear infinite\";\n```\n\n\n### Options\n\nTo the constructor of `CSSKeyframer` You can specify the following options.\n\n| Key             | Default            | Description                                                                                                                   |\n|:----------------|:-------------------|:------------------------------------------------------------------------------------------------------------------------------|\n| `namePrefix`    | `\"\"`               | Grant prefix to `@keyframes`.                                                                                                 |\n| `styleDataName` | `\"data-keyframes\"` | To specify the attributes to be used in the style element.                                                                    |\n| `pretty`        | `false`            | Output pretty code `@keyframes`. Primarily used for debugging applications.                                                   |\n| `useAgent`      | `null`             | Specify the UserAgent to be used for inline-style-prefixer. When set to `null`, it is judged automatically. **since: v1.0.0** |\n\n\n\n## API\n\n### getKeyframesString(name: string, keyframe: Object | Array): string\n\n**since: v1.0.0**\n\nGet CSS string containing the keyframes.\n\n```javascript\nkeyframer.getKeyframesString(\"spin\", {\n  \"0%\": { transform: \"rotate(0deg)\" },\n  \"100%\": { transform: \"rotate(360deg)\" }\n});\n\n// or Array style\nkeyframer.getKeyframesString(\"spin\", [\n  { transform: \"rotate(0deg)\" },\n  { transform: \"rotate(360deg)\" }\n]);\n\n// Result (pretty: true)\n// @keyframes spin {\n//   0% {\n//     transform: rotate(0deg);\n//   }\n//   100% {\n//     transform: rotate(360deg);\n//   }\n// }\n```\n\n\n### getKeyframeStylesheet(name: string, keyframe: Object | Array): string\n\n**since: v1.0.0**\n\nGet a style element containing a keyframe as a string.  \nIt is an API that you do not normally use. But, this is a useful API for Server-side Rendering.\n\n```javascript\nkeyframer.getKeyframeStylesheet(\"spin\", {\n  \"0%\": { transform: \"rotate(0deg)\" },\n  \"100%\": { transform: \"rotate(360deg)\" }\n});\n\n// or Array style\nkeyframer.getKeyframeStylesheet(\"spin\", [\n  { transform: \"rotate(0deg)\" },\n  { transform: \"rotate(360deg)\" }\n]);\n\n// Result (pretty: true)\n// \u003cstyle type=\"text/css\" data-keyframe=\"spin\"\u003e@keyframes spin {\n//   0% {\n//     transform: rotate(0deg);\n//   }\n//   100% {\n//     transform: rotate(360deg);\n//   }\n// }\u003c/style\u003e\n```\n\n\n\n### register(name: string, keyframe: Object | Array): void\n\nRegister the `@keyframes`.  \nIf `@keyframes` of the same name exists overwrites it.\n\n**Example:**\n\n```javascript\n// Object style\nkeyframer.register(\"spin\", {\n  \"0%\": { transform: \"rotate(0deg)\" },\n  \"100%\": { transform: \"rotate(360deg)\" }\n});\n\n// or Array style\nkeyframer.register(\"spin\", [\n  { transform: \"rotate(0deg)\" },\n  { transform: \"rotate(360deg)\" }\n]);\n\n// Result (pretty: true)\n// \u003cstyle type=\"text/css\" data-keyframe=\"spin\"\u003e\n// @keyframes spin {\n//   0% {\n//     transform: rotate(0deg);\n//   }\n//   100% {\n//     transform: rotate(360deg);\n//   }\n// }\n// \u003c/style\u003e\n```\n\n### unregister(name: string): void\n\nUnregister the `@keyframes`.\n\n**Example:**\n\n```javascript\nkeyframer.unregister(\"spin\");\n```\n\n### unregisterAll(): void\n\nUnregister all `@keyframes`.\n\n**Example:**\n\n```javascript\nkeyframer.unregisterAll();\n```\n\n### contains(name: string): boolean\n\nCheck whether the specified @keyframes exists.\n\n**Example:**\n\n```javascript\nkeyframer.contains(\"spin\"); // true or false\n```\n\n### animationProp: { js: string, css: string }\n\n**since: v1.0.0**\n\nIt provides the name of the property required for the animation of the set with a vendor prefix. (CSS and JS)\n\n**Example:**\n\n```javascript\nimport CSSKeyframer from \"css-keyframer\";\n\nconst keyframer = new CSSKeyframer();\nkeyframer.register(\"spin\", [\n  { transform: \"rotate(0deg)\" },\n  { transform: \"rotate(360deg)\" }\n]);\n\ndocument.querySelector(\".target\").style[keyframer.animationProp.js] = \"spin 1500ms linear infinite\";\n```\n\n\n\n## License\n\nReleased under the [MIT Licence](./LICENSE)\n\n\n\n## ChangeLog\n\nSee [CHANGELOG.md](./CHANGELOG.md).\n\n\n\n## Author\n\n[tsuyoshiwada](https://github.com/tsuyoshiwada)\n\n\n\n## Development\n\nInitialization of the project.\n\n```bash\n$ cd /your/project/dir\n$ git clone https://github.com/tsuyoshiwada/css-keyframer.git\n```\n\nInstall some dependencies.\n\n```bash\n$ npm install\n```\n\nStart the development and can you see demo page (access to the `http://localhost:3000/`).\n\n```bash\n$ npm start\n```\n\nRun lint and testing.\n\n```bash\n$ npm test\n```\n\nGenerates build file.\n\n```bash\n$ npm run build\n```\n\n\n## Contribution\n\nThank you for your interest in css-keyframer.js.  \nBugs, feature requests and comments are more than welcome in the [issues](https://github.com/tsuyoshiwada/css-keyframer/issues).\n\n**Before you open a PR:**\n\nBe careful to follow the code style of the project. Run `npm test` after your changes and ensure you do not introduce any new errors or warnings.\nAll new features and changes need documentation.\n\nThanks!\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwadackel%2Fcss-keyframer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwadackel%2Fcss-keyframer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwadackel%2Fcss-keyframer/lists"}