Skip to content

Commit 1d94637

Browse files
authored
Create README.md
1 parent afeb0ac commit 1d94637

File tree

1 file changed

+60
-0
lines changed

1 file changed

+60
-0
lines changed

README.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# CSSVarTransition
2+
RGB transitions for CSS Variables
3+
4+
## Install
5+
```
6+
> Terminal
7+
npm install --save cssvartransition
8+
```
9+
10+
## Function
11+
```
12+
async function transitionRGB(variable, target, seconds = 1000, steps = 10)
13+
```
14+
15+
**variable:**
16+
* String (Required),
17+
* name of root CSS Variable.
18+
19+
**target:**
20+
* List of integers (Required),
21+
* [red, green, blue] between 0 - 255.
22+
23+
**duration:**
24+
* Integer,
25+
* milliseconds i.e. 3000 = 3 seconds,
26+
* defaults to 1000.
27+
28+
**steps:**
29+
* Integer,
30+
* number of times the variable is updated during transition,
31+
* ( i.e. 5) lower = more accurate transition, higher ( i.e. 20 ) is smoother,
32+
* defaults to 10.
33+
34+
## Use example
35+
36+
```html
37+
<!-- /index.html -->
38+
39+
<p>Hello World</p>
40+
```
41+
42+
```css
43+
/* /Style.css */
44+
45+
:root {
46+
--color-1: 176, 5, 192;
47+
}
48+
49+
p {
50+
background-color: rgb( var(--color-1) );
51+
}
52+
```
53+
54+
```js
55+
# /main.js
56+
57+
import { transitionRGB } from "cssvartransition";
58+
59+
await transitionRGB( '--color-1', [ 210, 52, 243 ] );
60+
```

0 commit comments

Comments
 (0)