@vialiq/flux-ui 0.8.0 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/_animation.scss +247 -0
- package/components/_index.scss +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,247 @@
|
|
|
1
|
+
@use '../styles/variables' as tokens;
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Flux UI Design System — Animation Keyframes & Motion Tokens
|
|
5
|
+
*
|
|
6
|
+
* CSS-only consumer path: these @keyframes are used when consuming animations via
|
|
7
|
+
* the CSS `animation` shorthand property, e.g.:
|
|
8
|
+
* .my-el { animation: vi-fade-in 300ms var(--vi-animation-easing-standard) forwards; }
|
|
9
|
+
*
|
|
10
|
+
* Parallel WAAPI path: the component `<vi-animation>` uses a separate but equivalent
|
|
11
|
+
* set of PRESET_KEYFRAMES in `vi-animation.ts` for the Web Animations API runtime path.
|
|
12
|
+
* Both definitions intentionally coexist — sharing a runtime source would require
|
|
13
|
+
* a build-time code-gen step. IMPORTANT: When adding or changing a preset, update BOTH:
|
|
14
|
+
* 1. The `@keyframes vi-<name>` block below (CSS path)
|
|
15
|
+
* 2. The corresponding entry in `PRESET_KEYFRAMES` in vi-animation.ts (WAAPI path)
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
:root {
|
|
19
|
+
--vi-animation-duration-fast: 150ms;
|
|
20
|
+
--vi-animation-duration-base: 300ms;
|
|
21
|
+
--vi-animation-duration-slow: 500ms;
|
|
22
|
+
|
|
23
|
+
--vi-animation-easing-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
24
|
+
--vi-animation-easing-entrance: cubic-bezier(0, 0, 0.2, 1);
|
|
25
|
+
--vi-animation-easing-exit: cubic-bezier(0.4, 0, 1, 1);
|
|
26
|
+
--vi-animation-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
27
|
+
|
|
28
|
+
--vi-animation-expand-max-height: 100vh;
|
|
29
|
+
--vi-animation-expand-max-width: 100vw;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
// Fade Keyframes
|
|
33
|
+
@keyframes vi-fade-in {
|
|
34
|
+
from { opacity: 0; }
|
|
35
|
+
to { opacity: 1; }
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@keyframes vi-fade-out {
|
|
39
|
+
from { opacity: 1; }
|
|
40
|
+
to { opacity: 0; }
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@keyframes vi-fade-in-up {
|
|
44
|
+
from { opacity: 0; transform: translate3d(0, 1rem, 0); }
|
|
45
|
+
to { opacity: 1; transform: translate3d(0, 0, 0); }
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@keyframes vi-fade-in-down {
|
|
49
|
+
from { opacity: 0; transform: translate3d(0, -1rem, 0); }
|
|
50
|
+
to { opacity: 1; transform: translate3d(0, 0, 0); }
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@keyframes vi-fade-in-left {
|
|
54
|
+
from { opacity: 0; transform: translate3d(-1rem, 0, 0); }
|
|
55
|
+
to { opacity: 1; transform: translate3d(0, 0, 0); }
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@keyframes vi-fade-in-right {
|
|
59
|
+
from { opacity: 0; transform: translate3d(1rem, 0, 0); }
|
|
60
|
+
to { opacity: 1; transform: translate3d(0, 0, 0); }
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@keyframes vi-fade-out-up {
|
|
64
|
+
from { opacity: 1; transform: translate3d(0, 0, 0); }
|
|
65
|
+
to { opacity: 0; transform: translate3d(0, -1rem, 0); }
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@keyframes vi-fade-out-down {
|
|
69
|
+
from { opacity: 1; transform: translate3d(0, 0, 0); }
|
|
70
|
+
to { opacity: 0; transform: translate3d(0, 1rem, 0); }
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@keyframes vi-fade-out-left {
|
|
74
|
+
from { opacity: 1; transform: translate3d(0, 0, 0); }
|
|
75
|
+
to { opacity: 0; transform: translate3d(-1rem, 0, 0); }
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@keyframes vi-fade-out-right {
|
|
79
|
+
from { opacity: 1; transform: translate3d(0, 0, 0); }
|
|
80
|
+
to { opacity: 0; transform: translate3d(1rem, 0, 0); }
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// Zoom & Scale Keyframes
|
|
84
|
+
@keyframes vi-zoom-in {
|
|
85
|
+
from { opacity: 0; transform: scale3d(0.92, 0.92, 0.92); }
|
|
86
|
+
to { opacity: 1; transform: scale3d(1, 1, 1); }
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@keyframes vi-zoom-out {
|
|
90
|
+
from { opacity: 1; transform: scale3d(1, 1, 1); }
|
|
91
|
+
to { opacity: 0; transform: scale3d(0.92, 0.92, 0.92); }
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@keyframes vi-scale-up {
|
|
95
|
+
from { transform: scale3d(0.8, 0.8, 0.8); }
|
|
96
|
+
to { transform: scale3d(1, 1, 1); }
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
@keyframes vi-scale-down {
|
|
100
|
+
from { transform: scale3d(1.2, 1.2, 1.2); }
|
|
101
|
+
to { transform: scale3d(1, 1, 1); }
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
@keyframes vi-bounce-in {
|
|
105
|
+
0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
|
|
106
|
+
50% { opacity: 0.9; transform: scale3d(1.08, 1.08, 1.08); }
|
|
107
|
+
75% { transform: scale3d(0.95, 0.95, 0.95); }
|
|
108
|
+
100% { opacity: 1; transform: scale3d(1, 1, 1); }
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
@keyframes vi-bounce-out {
|
|
112
|
+
0% { opacity: 1; transform: scale3d(1, 1, 1); }
|
|
113
|
+
20% { transform: scale3d(0.9, 0.9, 0.9); }
|
|
114
|
+
50% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); }
|
|
115
|
+
100% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
@keyframes vi-pop-in {
|
|
119
|
+
0% { opacity: 0; transform: scale3d(0.8, 0.8, 1); }
|
|
120
|
+
70% { transform: scale3d(1.05, 1.05, 1); }
|
|
121
|
+
100% { opacity: 1; transform: scale3d(1, 1, 1); }
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
@keyframes vi-pop-out {
|
|
125
|
+
0% { opacity: 1; transform: scale3d(1, 1, 1); }
|
|
126
|
+
100% { opacity: 0; transform: scale3d(0.8, 0.8, 1); }
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
// Slide Keyframes
|
|
130
|
+
@keyframes vi-slide-in-top {
|
|
131
|
+
from { transform: translate3d(0, -100%, 0); }
|
|
132
|
+
to { transform: translate3d(0, 0, 0); }
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
@keyframes vi-slide-in-bottom {
|
|
136
|
+
from { transform: translate3d(0, 100%, 0); }
|
|
137
|
+
to { transform: translate3d(0, 0, 0); }
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
@keyframes vi-slide-in-left {
|
|
141
|
+
from { transform: translate3d(-100%, 0, 0); }
|
|
142
|
+
to { transform: translate3d(0, 0, 0); }
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
@keyframes vi-slide-in-right {
|
|
146
|
+
from { transform: translate3d(100%, 0, 0); }
|
|
147
|
+
to { transform: translate3d(0, 0, 0); }
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
@keyframes vi-slide-out-top {
|
|
151
|
+
from { transform: translate3d(0, 0, 0); }
|
|
152
|
+
to { transform: translate3d(0, -100%, 0); }
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
@keyframes vi-slide-out-bottom {
|
|
156
|
+
from { transform: translate3d(0, 0, 0); }
|
|
157
|
+
to { transform: translate3d(0, 100%, 0); }
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
@keyframes vi-slide-out-left {
|
|
161
|
+
from { transform: translate3d(0, 0, 0); }
|
|
162
|
+
to { transform: translate3d(-100%, 0, 0); }
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
@keyframes vi-slide-out-right {
|
|
166
|
+
from { transform: translate3d(0, 0, 0); }
|
|
167
|
+
to { transform: translate3d(100%, 0, 0); }
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
// 3D & Flip Keyframes
|
|
171
|
+
@keyframes vi-flip-x {
|
|
172
|
+
from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; }
|
|
173
|
+
to { transform: perspective(400px) rotate3d(1, 0, 0, 0deg); opacity: 1; }
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
@keyframes vi-flip-y {
|
|
177
|
+
from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; }
|
|
178
|
+
to { transform: perspective(400px) rotate3d(0, 1, 0, 0deg); opacity: 1; }
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
@keyframes vi-perspective-pop {
|
|
182
|
+
from { transform: perspective(600px) translateZ(-100px); opacity: 0; }
|
|
183
|
+
to { transform: perspective(600px) translateZ(0); opacity: 1; }
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
// Expand & Collapse Keyframes
|
|
187
|
+
@keyframes vi-expand-vertical {
|
|
188
|
+
from { max-height: 0; opacity: 0; }
|
|
189
|
+
to { max-height: var(--vi-animation-expand-max-height, 100vh); opacity: 1; }
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
@keyframes vi-collapse-vertical {
|
|
193
|
+
from { max-height: var(--vi-animation-expand-max-height, 100vh); opacity: 1; }
|
|
194
|
+
to { max-height: 0; opacity: 0; }
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
@keyframes vi-expand-horizontal {
|
|
198
|
+
from { max-width: 0; opacity: 0; }
|
|
199
|
+
to { max-width: var(--vi-animation-expand-max-width, 100vw); opacity: 1; }
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
@keyframes vi-collapse-horizontal {
|
|
203
|
+
from { max-width: var(--vi-animation-expand-max-width, 100vw); opacity: 1; }
|
|
204
|
+
to { max-width: 0; opacity: 0; }
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
// Attention Seekers & Utilities
|
|
208
|
+
@keyframes vi-pulse {
|
|
209
|
+
0% { transform: scale3d(1, 1, 1); }
|
|
210
|
+
50% { transform: scale3d(1.05, 1.05, 1.05); }
|
|
211
|
+
100% { transform: scale3d(1, 1, 1); }
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
@keyframes vi-bounce {
|
|
215
|
+
0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); }
|
|
216
|
+
40%, 43% { transform: translate3d(0, -12px, 0); }
|
|
217
|
+
70% { transform: translate3d(0, -6px, 0); }
|
|
218
|
+
90% { transform: translate3d(0, -2px, 0); }
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
@keyframes vi-shake {
|
|
222
|
+
0%, 100% { transform: translate3d(0, 0, 0); }
|
|
223
|
+
10%, 30%, 50%, 70%, 90% { transform: translate3d(-4px, 0, 0); }
|
|
224
|
+
20%, 40%, 60%, 80% { transform: translate3d(4px, 0, 0); }
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
@keyframes vi-wobble {
|
|
228
|
+
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
|
|
229
|
+
15% { transform: translate3d(-15%, 0, 0) rotate(-4deg); }
|
|
230
|
+
30% { transform: translate3d(12%, 0, 0) rotate(3deg); }
|
|
231
|
+
45% { transform: translate3d(-9%, 0, 0) rotate(-2deg); }
|
|
232
|
+
60% { transform: translate3d(6%, 0, 0) rotate(1deg); }
|
|
233
|
+
75% { transform: translate3d(-3%, 0, 0) rotate(-1deg); }
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
@keyframes vi-heartbeat {
|
|
237
|
+
0% { transform: scale(1); }
|
|
238
|
+
14% { transform: scale(1.15); }
|
|
239
|
+
28% { transform: scale(1); }
|
|
240
|
+
42% { transform: scale(1.15); }
|
|
241
|
+
70% { transform: scale(1); }
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
@keyframes vi-shimmer {
|
|
245
|
+
0% { background-position: -200% 0; }
|
|
246
|
+
100% { background-position: 200% 0; }
|
|
247
|
+
}
|
package/components/_index.scss
CHANGED