{"id":17880716,"url":"https://github.com/gibbok/keyframes-tool","last_synced_at":"2026-02-26T10:08:13.882Z","repository":{"id":104795292,"uuid":"75430403","full_name":"gibbok/keyframes-tool","owner":"gibbok","description":"Keyframes-tool is a NodeJs command-line tool which converts CSS Animations to keyframes object suitable for Web Animations API. Use this tool to move your animations from stylesheets to JavaScript.","archived":false,"fork":false,"pushed_at":"2022-11-06T19:29:02.000Z","size":36,"stargazers_count":63,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T17:42:39.208Z","etag":null,"topics":["animation","animations","convert-css-animations","css","javascript","keyframes","nodejs","web-animations-api"],"latest_commit_sha":null,"homepage":"","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/gibbok.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-02T20:58:30.000Z","updated_at":"2024-02-24T09:57:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"8a8a43e8-d64d-4769-89f0-a440108ef08e","html_url":"https://github.com/gibbok/keyframes-tool","commit_stats":{"total_commits":60,"total_committers":3,"mean_commits":20.0,"dds":"0.16666666666666663","last_synced_commit":"37d07b6ca37b95747c5eb47e3fed136b90e90e85"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gibbok%2Fkeyframes-tool","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gibbok%2Fkeyframes-tool/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gibbok%2Fkeyframes-tool/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gibbok%2Fkeyframes-tool/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gibbok","download_url":"https://codeload.github.com/gibbok/keyframes-tool/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244198386,"owners_count":20414443,"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","animations","convert-css-animations","css","javascript","keyframes","nodejs","web-animations-api"],"created_at":"2024-10-28T12:27:50.448Z","updated_at":"2026-02-26T10:08:08.823Z","avatar_url":"https://github.com/gibbok.png","language":"JavaScript","readme":"# keyframes-tool\n\nKeyframes-tool is a NodeJs command line tool which convert CSS Animations to a [keyframes object ](https://w3c.github.io/web-animations/#processing-a-keyframes-argument) suitable for [Web Animations API](https://w3c.github.io/web-animations/).\n\nUse this tool to move your interactive animations from stylesheets to JavaScript.\n\n\n## Great! So how do I use it?\n\n- Install keyframes-tool using `npm install keyframes-tool` or adding it in your `package.json` as: `\"devDependencies\": { \"keyframes-tool\": \"^1.0.3\" }` and run `npm install`.\n- Run command line in your keyframes-tool directory and enter `node keyframes-tool ./input.css ./output.json`,\nwhere as first argument `./input.css` is the CSS source file to process and the second argument `./output.json` is the destination file with the converted result.\nPaths should be relative to `keyframes-tool.js` file location.\n- keyframes-tool will create a JSON file from your CSS where any CSS Animation declarations found will be added as a property, example:\n\nInput file `input.css`:\n```css\n@keyframes flash {\n  from, 50%, to {\n    opacity: 1;\n  }\n\n  25%, 75% {\n    opacity: 0;\n  }\n}\n\n@keyframes pulse {\n  from {\n    transform: scale3d(1, 1, 1);\n  }\n\n  50% {\n    transform: scale3d(1.05, 1.05, 1.05);\n  }\n\n  to {\n    transform: scale3d(1, 1, 1);\n  }\n}\n\n```\nOutput file `output.json`:\n\n```json\n{\n    \"flash\": [\n        {\n            \"opacity\": \"1\",\n            \"offset\": \"0\",\n            \"easing\": \"ease\"\n        },\n        {\n            \"opacity\": \"0\",\n            \"offset\": \"0.25\",\n            \"easing\": \"ease\"\n        },\n        {\n            \"opacity\": \"1\",\n            \"offset\": \"0.5\",\n            \"easing\": \"ease\"\n        },\n        {\n            \"opacity\": \"0\",\n            \"offset\": \"0.75\",\n            \"easing\": \"ease\"\n        },\n        {\n            \"opacity\": \"1\",\n            \"offset\": \"1\",\n            \"easing\": \"ease\"\n        }\n    ],\n    \"pulse\": [\n        {\n            \"transform\": \"scale3d(1, 1, 1)\",\n            \"offset\": \"0\",\n            \"easing\": \"ease\"\n        },\n        {\n            \"transform\": \"scale3d(1.05, 1.05, 1.05)\",\n            \"offset\": \"0.5\",\n            \"easing\": \"ease\"\n        },\n        {\n            \"transform\": \"scale3d(1, 1, 1)\",\n            \"offset\": \"1\",\n            \"easing\": \"ease\"\n        }\n    ]\n}\n```\n- Use the result as embedded data in your JavaScript as [shown in this example](http://codepen.io/gibbok/pen/ENpqZO), alternatively you could load the JSON data using Ajax.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgibbok%2Fkeyframes-tool","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgibbok%2Fkeyframes-tool","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgibbok%2Fkeyframes-tool/lists"}