https://github.com/gibbok/keyframes-tool
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.
https://github.com/gibbok/keyframes-tool
animation animations convert-css-animations css javascript keyframes nodejs web-animations-api
Last synced: 10 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/gibbok/keyframes-tool
- Owner: gibbok
- License: mit
- Created: 2016-12-02T20:58:30.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2022-11-06T19:29:02.000Z (about 3 years ago)
- Last Synced: 2024-04-25T17:42:39.208Z (almost 2 years ago)
- Topics: animation, animations, convert-css-animations, css, javascript, keyframes, nodejs, web-animations-api
- Language: JavaScript
- Homepage:
- Size: 35.2 KB
- Stars: 63
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# keyframes-tool
Keyframes-tool is a NodeJs command line tool which convert CSS Animations to a [keyframes object ](https://w3c.github.io/web-animations/#processing-a-keyframes-argument) suitable for [Web Animations API](https://w3c.github.io/web-animations/).
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`:
```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`:
```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](http://codepen.io/gibbok/pen/ENpqZO), alternatively you could load the JSON data using Ajax.