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.
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.
npm install keyframes-tool
or adding it in your package.json
as: "devDependencies": { "keyframes-tool": "^1.0.3" }
and run npm install
.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.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"
}
]
}