https://github.com/cssobj/cssobj-plugin-keyframes
Make keyframes rules localized, and apply to animation and animation-name css props.
https://github.com/cssobj/cssobj-plugin-keyframes
Last synced: about 2 months ago
JSON representation
Make keyframes rules localized, and apply to animation and animation-name css props.
- Host: GitHub
- URL: https://github.com/cssobj/cssobj-plugin-keyframes
- Owner: cssobj
- License: mit
- Created: 2016-11-12T01:39:39.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-26T01:05:21.000Z (almost 9 years ago)
- Last Synced: 2025-09-17T11:33:35.593Z (9 months ago)
- Language: JavaScript
- Size: 9.77 KB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# cssobj-plugin-keyframes
Make keyframes rules localized, and apply to animation and animation-name css props.
[](https://circleci.com/gh/cssobj/cssobj-plugin-keyframes)
## Install
``` bash
npm install cssobj-plugin-keyframes
```
## Usage
``` javascript
var lib = require('cssobj-plugin-keyframes')
var obj = {
'@keyframes abc': {},
'@keyframes !def': {}, // adding ! to become `global` space
p: {animation: '1s abc'}
div: {animationName: '!def'} // adding ! to become `global` space
}
cssobj(obj, { plugins: [lib()] })
```
result css:
``` css
@keyframes abc_ani_i3bhs8s1_ {}
@keyframes def {}
p {
animation: 1s abc_ani_i3bhs8s1_;
}
div {
animation-name: def;
}
```
## Caveat
- `animation-name` prop should at **last** position in [animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation) shorthand, that simplified the parser, and more unified.