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 your package.json as: "devDependencies": { "keyframes-tool": "^1.0.3" } and run npm 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 to keyframes-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 : @keyframes flash { from , 50% , to { opacity : 1 ; } 25 % , 75 % { opacity : 0 ; } } @keyframes pulse { from { transform : scale3d ( 1 , 1 , 1 ); } 50 % { transform : scale3d ( 1.05 , 1.05 , 1.05 ); } to { transform : scale3d ( 1 , 1 , 1 ); } } Output file output.json : { "flash" : [ { "opacity" : " 1 " , "offset" : " 0 " , "easing" : " ease " }, { "opacity" : " 0 " , "offset" : " 0.25 " , "easing" : " ease " }, { "opacity" : " 1 " , "offset" : " 0.5 " , "easing" : " ease " }, { "opacity" : " 0 " , "offset" : " 0.75 " , "easing" : " ease " }, { "opacity" : " 1 " , "offset" : " 1 " , "easing" : " ease " } ], "pulse" : [ { "transform" : " scale3d(1, 1, 1) " , "offset" : " 0 " , "easing" : " ease " }, { "transform" : " scale3d(1.05, 1.05, 1.05) " , "offset" : " 0.5 " , "easing" : " ease " }, { "transform" : " scale3d(1, 1, 1) " , "offset" : " 1 " , "easing" : " ease " } ] } Use the result as embedded data in your JavaScript as shown in this example , alternatively you could load the JSON data using Ajax.
