Skip to content

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.

License

Notifications You must be signed in to change notification settings

gibbok/keyframes-tool

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

64 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

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.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published