File tree Expand file tree Collapse file tree 1 file changed +60
-0
lines changed
Expand file tree Collapse file tree 1 file changed +60
-0
lines changed Original file line number Diff line number Diff line change 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+ ```
You can’t perform that action at this time.
0 commit comments