{"_id":"css-keyframer","_rev":"6-30dc1abf185db4ce4d23066914d5bbd1","name":"css-keyframer","description":"Dynamic css animation keyframes Manipulation library.","dist-tags":{"latest":"1.0.1"},"versions":{"0.0.1":{"name":"css-keyframer","version":"0.0.1","description":"Dynamic css animation keyframes Manipulation library.","main":"css-keyframer.js","scripts":{"start":"npm run watch & npm run demo","test":"npm run lint && npm run karma","build":"npm run build:js && npm run demo:build","build:js":"NODE_ENV=production rollup -i src/index.js -o css-keyframer.js -c && uglifyjs --compress --mangle -o css-keyframer.min.js --comments -- css-keyframer.js","watch":"npm run watch:js & npm run watch:test","watch:js":"onchange 'src/**/*.js' -- npm run build:js","watch:test":"onchange 'test/**/*.js' -- npm run karma","lint":"eslint src/**/*.js .eslintrc.js --no-ignore","karma":"NODE_ENV=test karma start karma.conf.js --single-run","demo":"npm run demo:server & npm run demo:watch","demo:server":"browser-sync start -s 'demo' -f 'demo/**/*.html, demo/**/*.css, demo/**/*.js' --no-notify --no-open --no-ghost-mode","demo:watch":"onchange 'css-keyframer.js' -- npm run demo:build","demo:build":"copyfiles css-keyframer.js demo/"},"keywords":["css","animation","keyframes","css-keyframer"],"repository":{"type":"git","url":"git+https://github.com/tsuyoshiwada/css-keyframer.git"},"bugs":{"url":"https://github.com/tsuyoshiwada/css-keyframer/issues"},"homepage":"https://github.com/tsuyoshiwada/css-keyframer","author":{"name":"tsuyoshiwada"},"license":"MIT","dependencies":{"css-vendor":"^0.3.4","is-plain-object":"^2.0.1","object-assign":"^4.1.0","param-case":"^2.1.0","pascal-case":"^2.0.0"},"devDependencies":{"babel-eslint":"^6.1.0","babel-plugin-espower":"^2.3.1","babel-preset-es2015":"^6.9.0","babel-preset-es2015-rollup":"^1.1.1","babel-preset-stage-0":"^6.5.0","babelify":"^7.3.0","browser-sync":"^2.13.0","browserify":"^13.0.1","copyfiles":"^1.0.0","eslint":"^2.13.1","karma":"^1.1.0","karma-browserify":"^5.0.5","karma-cli":"^1.0.1","karma-mocha":"^1.1.1","karma-phantomjs-launcher":"^1.0.1","karma-phantomjs-shim":"^1.4.0","mocha":"^2.5.3","onchange":"^2.5.0","phantomjs-prebuilt":"^2.1.7","power-assert":"^1.4.1","rollup":"^0.33.0","rollup-plugin-babel":"^2.6.1","rollup-plugin-commonjs":"^3.1.0","rollup-plugin-node-resolve":"^1.7.1","uglify-js":"^2.6.4","watchify":"^3.7.0"},"gitHead":"cf1995aad016e0835d344ea0e5f85a7f21e48e47","_id":"css-keyframer@0.0.1","_shasum":"dca067663ba566ebd563491b8f3e386c6e679951","_from":".","_npmVersion":"3.9.3","_nodeVersion":"6.2.1","_npmUser":{"name":"tsuyoshiwada","email":"v23.b.wada@gmail.com"},"dist":{"shasum":"dca067663ba566ebd563491b8f3e386c6e679951","tarball":"https://registry.npmjs.org/css-keyframer/-/css-keyframer-0.0.1.tgz","integrity":"sha512-U4zJ6mBnXx2Q1g+x0PalMGtZtpm0shVAvt+H8z40/+wxEMjQ3PROCuQsT3jNnwDwXb6G/N0m+CYXBo6VD9px2w==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZlG0xVYBWUuquWkCtiswmUSv7tQp00IWNwGMJ+CDQgwIhAIYg3Svh0Ko44zJS/ThwmVm6eCfMnJvFx3nv24rYQcnr"}]},"maintainers":[{"name":"tsuyoshiwada","email":"v23.b.wada@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/css-keyframer-0.0.1.tgz_1467393976722_0.17800552560947835"},"directories":{}},"1.0.0":{"name":"css-keyframer","version":"1.0.0","description":"Dynamic css animation keyframes Manipulation library.","main":"css-keyframer.js","scripts":{"start":"npm run watch & npm run demo","test":"npm run lint && npm run karma","build":"npm run build:js && npm run demo:build","build:js":"NODE_ENV=production rollup -i src/index.js -o css-keyframer.js -c && uglifyjs -c -m -o css-keyframer.min.js --comments -- css-keyframer.js","watch":"npm run watch:js & npm run watch:test","watch:js":"onchange 'src/**/*.js' -- npm run build:js","watch:test":"onchange 'test/**/*.js' -- npm run karma","lint":"eslint src/**/*.js .eslintrc.js --no-ignore","karma":"NODE_ENV=test karma start karma.conf.js --single-run","demo":"npm run demo:server & npm run demo:watch","demo:server":"browser-sync start -s 'demo' -f 'demo/**/*.html, demo/**/*.css, demo/**/*.js' --no-notify --no-open --no-ghost-mode","demo:watch":"onchange 'css-keyframer.js' -- npm run demo:build","demo:build":"copyfiles css-keyframer.js demo/"},"keywords":["css","animation","keyframes","css-keyframer"],"repository":{"type":"git","url":"git+https://github.com/tsuyoshiwada/css-keyframer.git"},"bugs":{"url":"https://github.com/tsuyoshiwada/css-keyframer/issues"},"homepage":"https://github.com/tsuyoshiwada/css-keyframer","author":{"name":"tsuyoshiwada"},"license":"MIT","dependencies":{"exenv":"^1.2.1","hyphenate-style-name":"^1.0.2","inline-style-prefixer":"^2.0.5","is-plain-object":"^2.0.1"},"devDependencies":{"babel-eslint":"^7.1.1","babel-plugin-espower":"^2.3.2","babel-preset-es2015":"^6.22.0","babel-preset-es2015-rollup":"^3.0.0","babel-preset-stage-0":"^6.22.0","babelify":"^7.3.0","browser-sync":"^2.18.6","browserify":"^14.0.0","copyfiles":"^1.1.0","eslint":"^3.14.1","karma":"^1.4.1","karma-browserify":"^5.1.1","karma-cli":"^1.0.1","karma-mocha":"^1.3.0","karma-phantomjs-launcher":"^1.0.2","karma-phantomjs-shim":"^1.4.0","mocha":"^3.2.0","onchange":"^3.2.1","phantomjs-prebuilt":"^2.1.14","power-assert":"^1.4.2","rollup":"^0.41.4","rollup-plugin-babel":"^2.7.1","rollup-plugin-commonjs":"^7.0.0","rollup-plugin-node-resolve":"^2.0.0","uglify-js":"^2.7.5","watchify":"^3.9.0"},"gitHead":"55f84961ee44a9740bc09645d781fb6f848462dc","_id":"css-keyframer@1.0.0","_shasum":"531702ed845791e3906070ffbabde8d5b568b4bd","_from":".","_npmVersion":"4.0.3","_nodeVersion":"6.2.1","_npmUser":{"name":"tsuyoshiwada","email":"v23.b.wada@gmail.com"},"dist":{"shasum":"531702ed845791e3906070ffbabde8d5b568b4bd","tarball":"https://registry.npmjs.org/css-keyframer/-/css-keyframer-1.0.0.tgz","integrity":"sha512-8AGClwM8FUZviOmxzbwMnUylpiSanlu/HFyt3ufN3UKLxhmcg3EGXvW+8Fr4k7XamZJa/GFShV5NDxM40dTVgA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICju1jul2oNmrlpwL3yBU3dSZdN7LJjJQoSmhHEL5OADAiEAoYLFBkA/IGo4jFlTEKWnXW7fdjkPGSWAoNJJZXhQv4g="}]},"maintainers":[{"name":"tsuyoshiwada","email":"v23.b.wada@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/css-keyframer-1.0.0.tgz_1485865821160_0.25047410116530955"},"directories":{}},"1.0.1":{"name":"css-keyframer","version":"1.0.1","description":"Dynamic css animation keyframes Manipulation library.","main":"css-keyframer.js","scripts":{"start":"npm run watch & npm run demo","test":"npm run lint && npm run karma","build":"npm run build:js && npm run demo:build","build:js":"NODE_ENV=production rollup -i src/index.js -o css-keyframer.js -c && uglifyjs -c -m -o css-keyframer.min.js --comments -- css-keyframer.js","watch":"npm run watch:js & npm run watch:test","watch:js":"onchange 'src/**/*.js' -- npm run build:js","watch:test":"onchange 'test/**/*.js' -- npm run karma","lint":"eslint src/**/*.js .eslintrc.js --no-ignore","karma":"NODE_ENV=test karma start karma.conf.js --single-run","demo":"npm run demo:server & npm run demo:watch","demo:server":"browser-sync start -s 'demo' -f 'demo/**/*.html, demo/**/*.css, demo/**/*.js' --no-notify --no-open --no-ghost-mode","demo:watch":"onchange 'css-keyframer.js' -- npm run demo:build","demo:build":"copyfiles css-keyframer.js demo/"},"keywords":["css","animation","keyframes","css-keyframer"],"repository":{"type":"git","url":"git+https://github.com/tsuyoshiwada/css-keyframer.git"},"bugs":{"url":"https://github.com/tsuyoshiwada/css-keyframer/issues"},"homepage":"https://github.com/tsuyoshiwada/css-keyframer","author":{"name":"tsuyoshiwada"},"license":"MIT","dependencies":{"exenv":"^1.2.1","hyphenate-style-name":"^1.0.2","inline-style-prefixer":"^2.0.5","is-plain-object":"^2.0.1"},"devDependencies":{"babel-eslint":"^7.1.1","babel-plugin-espower":"^2.3.2","babel-preset-es2015":"^6.22.0","babel-preset-es2015-rollup":"^3.0.0","babel-preset-stage-0":"^6.22.0","babelify":"^7.3.0","browser-sync":"^2.18.6","browserify":"^14.0.0","copyfiles":"^1.1.0","eslint":"^3.14.1","karma":"^1.4.1","karma-browserify":"^5.1.1","karma-cli":"^1.0.1","karma-mocha":"^1.3.0","karma-phantomjs-launcher":"^1.0.2","karma-phantomjs-shim":"^1.4.0","mocha":"^3.2.0","onchange":"^3.2.1","phantomjs-prebuilt":"^2.1.14","power-assert":"^1.4.2","rollup":"^0.41.4","rollup-plugin-babel":"^2.7.1","rollup-plugin-commonjs":"^7.0.0","rollup-plugin-node-resolve":"^2.0.0","uglify-js":"^2.7.5","watchify":"^3.9.0"},"gitHead":"b8862302df70bf7d722fbc5092ab55fb077b3ad9","_id":"css-keyframer@1.0.1","_shasum":"441017f3e2d68c92a7a50b8b6766bcb9c8ef090f","_from":".","_npmVersion":"4.0.3","_nodeVersion":"6.2.1","_npmUser":{"name":"tsuyoshiwada","email":"v23.b.wada@gmail.com"},"dist":{"shasum":"441017f3e2d68c92a7a50b8b6766bcb9c8ef090f","tarball":"https://registry.npmjs.org/css-keyframer/-/css-keyframer-1.0.1.tgz","integrity":"sha512-phC5sJgNW0Vv8XjHPIUkTAAxUwEh0XaP/4EfE4/SiBPx9zsRl2fzwh5GE2l7/Rgsx2lKFpm56zFSV9l2pu/csQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDvElSjwRpM32siHhVtVHxj6k6fTUA4LuUQz1ZExOqECAiBguK7yfJKDNVLYNbLVMhALBAk0sS68JbAZj6aEHATseA=="}]},"maintainers":[{"name":"tsuyoshiwada","email":"v23.b.wada@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/css-keyframer-1.0.1.tgz_1485912740220_0.2579262473154813"},"directories":{}}},"readme":"![\"css-keyframer.js\"](\"https://raw.githubusercontent.com/tsuyoshiwada/css-keyframer/images/logo%402x.png\")
\n================\n\n[](https://travis-ci.org/tsuyoshiwada/css-keyframer)\n[](http://badge.fury.io/js/css-keyframer)\n[](https://david-dm.org/tsuyoshiwada/css-keyframer/)\n\nDynamic css animation keyframes Manipulation library.\n\nSee demo page: https://tsuyoshiwada.github.io/css-keyframer/\n\n\n\n## Description\n\ncss-keyframer.js provides a Low-level API that add to the head element dynamically generates a style element. \nTherefore, linking to the DOM element must be handled by the user side.\n\n\n\n### WHY?\n\nWhen you want to apply the same animation to multiple elements, it is inefficient to update the in-line style of all the elements. \nIf you reuse one of `@keyframes` it can be realized efficient animation.\n\n\n\n## Install\n\nYou can install the [css-keyframer.js](https://www.npmjs.com/package/css-keyframer) from [npm](https://www.npmjs.com/).\n\n```bash\n$ npm install css-keyframer --save\n```\n\nor Download the [css-keyframer.min.js](https://raw.githubusercontent.com/tsuyoshiwada/css-keyframer/master/css-keyframer.min.js)\n\n\n\n## Getting started\n\nIn the following example, to apply the spin animation to `div.element`.\n\n```html\n\n```\n\n```javascript\nimport CSSKeyframer from \"css-keyframer\";\n\nconst keyframer = new CSSKeyframer({ /* options */ });\n\n// CSS property will be added vendor-prefix is automatically!\nkeyframer.register(\"spin\", [\n { transform: \"rotate(0deg)\" },\n { transform: \"rotate(360deg)\" }\n]);\n\ndocument.querySelector(\".element\").style[keyframer.animationProp.js] = \"spin 1500ms linear infinite\";\n```\n\n\n### Options\n\nTo the constructor of `CSSKeyframer` You can specify the following options.\n\n| Key | Default | Description |\n|:----------------|:-------------------|:------------------------------------------------------------------------------------------------------------------------------|\n| `namePrefix` | `\"\"` | Grant prefix to `@keyframes`. |\n| `styleDataName` | `\"data-keyframes\"` | To specify the attributes to be used in the style element. |\n| `pretty` | `false` | Output pretty code `@keyframes`. Primarily used for debugging applications. |\n| `useAgent` | `null` | Specify the UserAgent to be used for inline-style-prefixer. When set to `null`, it is judged automatically. **since: v1.0.0** |\n\n\n\n## API\n\n### getKeyframesString(name: string, keyframe: Object | Array): string\n\n**since: v1.0.0**\n\nGet CSS string containing the keyframes.\n\n```javascript\nkeyframer.getKeyframesString(\"spin\", {\n \"0%\": { transform: \"rotate(0deg)\" },\n \"100%\": { transform: \"rotate(360deg)\" }\n});\n\n// or Array style\nkeyframer.getKeyframesString(\"spin\", [\n { transform: \"rotate(0deg)\" },\n { transform: \"rotate(360deg)\" }\n]);\n\n// Result (pretty: true)\n// @keyframes spin {\n// 0% {\n// transform: rotate(0deg);\n// }\n// 100% {\n// transform: rotate(360deg);\n// }\n// }\n```\n\n\n### getKeyframeStylesheet(name: string, keyframe: Object | Array): string\n\n**since: v1.0.0**\n\nGet a style element containing a keyframe as a string. \nIt is an API that you do not normally use. But, this is a useful API for Server-side Rendering.\n\n```javascript\nkeyframer.getKeyframeStylesheet(\"spin\", {\n \"0%\": { transform: \"rotate(0deg)\" },\n \"100%\": { transform: \"rotate(360deg)\" }\n});\n\n// or Array style\nkeyframer.getKeyframeStylesheet(\"spin\", [\n { transform: \"rotate(0deg)\" },\n { transform: \"rotate(360deg)\" }\n]);\n\n// Result (pretty: true)\n// \n```\n\n\n\n### register(name: string, keyframe: Object | Array): void\n\nRegister the `@keyframes`. \nIf `@keyframes` of the same name exists overwrites it.\n\n**Example:**\n\n```javascript\n// Object style\nkeyframer.register(\"spin\", {\n \"0%\": { transform: \"rotate(0deg)\" },\n \"100%\": { transform: \"rotate(360deg)\" }\n});\n\n// or Array style\nkeyframer.register(\"spin\", [\n { transform: \"rotate(0deg)\" },\n { transform: \"rotate(360deg)\" }\n]);\n\n// Result (pretty: true)\n// \n```\n\n### unregister(name: string): void\n\nUnregister the `@keyframes`.\n\n**Example:**\n\n```javascript\nkeyframer.unregister(\"spin\");\n```\n\n### unregisterAll(): void\n\nUnregister all `@keyframes`.\n\n**Example:**\n\n```javascript\nkeyframer.unregisterAll();\n```\n\n### contains(name: string): boolean\n\nCheck whether the specified @keyframes exists.\n\n**Example:**\n\n```javascript\nkeyframer.contains(\"spin\"); // true or false\n```\n\n### animationProp: { js: string, css: string }\n\n**since: v1.0.0**\n\nIt provides the name of the property required for the animation of the set with a vendor prefix. (CSS and JS)\n\n**Example:**\n\n```javascript\nimport CSSKeyframer from \"css-keyframer\";\n\nconst keyframer = new CSSKeyframer();\nkeyframer.register(\"spin\", [\n { transform: \"rotate(0deg)\" },\n { transform: \"rotate(360deg)\" }\n]);\n\ndocument.querySelector(\".target\").style[keyframer.animationProp.js] = \"spin 1500ms linear infinite\";\n```\n\n\n\n## License\n\nReleased under the [MIT Licence](./LICENSE)\n\n\n\n## ChangeLog\n\nSee [CHANGELOG.md](./CHANGELOG.md).\n\n\n\n## Author\n\n[tsuyoshiwada](https://github.com/tsuyoshiwada)\n\n\n\n## Development\n\nInitialization of the project.\n\n```bash\n$ cd /your/project/dir\n$ git clone https://github.com/tsuyoshiwada/css-keyframer.git\n```\n\nInstall some dependencies.\n\n```bash\n$ npm install\n```\n\nStart the development and can you see demo page (access to the `http://localhost:3000/`).\n\n```bash\n$ npm start\n```\n\nRun lint and testing.\n\n```bash\n$ npm test\n```\n\nGenerates build file.\n\n```bash\n$ npm run build\n```\n\n\n## Contribution\n\nThank you for your interest in css-keyframer.js. \nBugs, feature requests and comments are more than welcome in the [issues](https://github.com/tsuyoshiwada/css-keyframer/issues).\n\n**Before you open a PR:**\n\nBe careful to follow the code style of the project. Run `npm test` after your changes and ensure you do not introduce any new errors or warnings.\nAll new features and changes need documentation.\n\nThanks!\n\n","maintainers":[{"email":"wadackel+npm@gmail.com","name":"wadackel"}],"time":{"modified":"2022-06-14T04:39:52.047Z","created":"2016-07-01T17:26:20.983Z","0.0.1":"2016-07-01T17:26:20.983Z","1.0.0":"2017-01-31T12:30:21.399Z","1.0.1":"2017-02-01T01:32:22.254Z"},"homepage":"https://github.com/tsuyoshiwada/css-keyframer","keywords":["css","animation","keyframes","css-keyframer"],"repository":{"type":"git","url":"git+https://github.com/tsuyoshiwada/css-keyframer.git"},"author":{"name":"tsuyoshiwada"},"bugs":{"url":"https://github.com/tsuyoshiwada/css-keyframer/issues"},"license":"MIT","readmeFilename":"README.md"}