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.