keyframes-tool
Keyframes-tool is a NodeJs command line tool which convert CSS Animations to a keyframes object suitable for Web Animations API.
Use this tool to move your interactive animations from stylesheets to JavaScript.
Great! So how do I use it?
- Install keyframes-tool using
npm install keyframes-tool
or adding it in yourpackage.json
as:"devDependencies": { "keyframes-tool": "^1.0.3" }
and runnpm install
. - Run command line in your keyframes-tool directory and enter
node keyframes-tool ./input.css ./output.json
, where 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. Paths should be relative tokeyframes-tool.js
file location. - keyframes-tool will create a JSON file from your CSS where any CSS Animation declarations found will be added as a property, example:
Input file input.css
:
@ 25%, 75% } @ 50% }
Output file output.json
:
- Use the result as embedded data in your JavaScript as shown in this example, alternatively you could load the JSON data using Ajax.