Skip to content

Commit 6e98435

Browse files
committed
feat: add prefixes to keyframes
1 parent 3220b02 commit 6e98435

File tree

2 files changed

+25
-6
lines changed

2 files changed

+25
-6
lines changed

docs/keyframes.md

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,22 @@
11
# `keyframes()` Addon
22

3-
This addon allows one to define CSS `@keyframes` in any CSS-like object. It also exposes
4-
a `keyframes()` function, which can generate a unique animation name.
3+
This addon allows one to define CSS `@keyframes` in any CSS-like object.
4+
5+
```js
6+
const className = nano.rule({
7+
animation: 'my-animation 2s',
8+
'@keyframes my-animation': {
9+
'0%': {
10+
transform: 'rotate(0deg)'
11+
},
12+
'100%': {
13+
transform: 'rotate(359deg)'
14+
}
15+
}
16+
});
17+
```
18+
19+
It also exposes a `keyframes()` function, which generates a unique animation name automatically.
520

621
```js
722
const animation = nano.keyframes({
@@ -19,6 +34,13 @@ const className = rule({
1934
```
2035

2136

37+
## Configuration
38+
39+
As a second argument, `keyframes` addon can accept a configuration object with the following keys:
40+
41+
- `prefixes` — optional, array of prefixes to add to `@keyframes` at-rule, defaults to `['-webkit-', '-moz-', '-o-', '']`.
42+
43+
2244
## Installation
2345

2446
Simply install `keyframes` addon. Read more about the [Addon Installation](./Addons.md#addon-installation).

package.json

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,9 @@
1212
"eslint": "eslint src",
1313
"start": "npm run storybook",
1414
"clean": "rimraf dist && npm run test:visual:clean",
15-
"test": "npm run eslint && npm run test:server && jest",
15+
"test": "npm run eslint && jest",
1616
"test:coverage": "jest --coverage",
1717
"test:watch": "jest --watch",
18-
"test:server": "NODE_ENV=production mocha addon/**/*.test-server.js",
1918
"test:visual": "npm run storybook",
2019
"test:visual:build": "build-storybook",
2120
"test:visual:clean": "rimraf storybook-static",
@@ -74,8 +73,6 @@
7473
"semantic-release": "12.4.1",
7574
"gitbook-cli": "2.3.2",
7675
"libreact": "0.16.5",
77-
"mocha": "5.0.4",
78-
"chai": "4.1.2",
7976
"webpack-bundle-analyzer": "2.11.1",
8077
"eslint": "4.19.0",
8178
"typescript": "2.7.2",

0 commit comments

Comments
 (0)