Skip to content
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 animations from stylesheets to JavaScript.
Branch: master
Clone or download
Latest commit 4f72e23 May 7, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Add lunch.json test arguments Dec 19, 2016
.gitignore Add files Dec 2, 2016
LICENSE Add files Dec 2, 2016
README.md Add version May 7, 2017
keyframes-tool.js Add code format May 5, 2017
notes.md Add files Dec 2, 2016
package.json Add version May 7, 2017

README.md

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.
You can’t perform that action at this time.