0
# Animation & Interaction
1

2
PrimeFlex provides utilities for transitions, transforms, keyframe animations, and interactive states to create dynamic and engaging user interfaces. All animation utilities support responsive breakpoints.
3

4
## Transitions
5

6
### Transition Properties
7

8
```scss { .api }
9
.transition-none { transition: none; }
10
.transition-all { transition: all 150ms ease; }
11
.transition-colors { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
12
.transition-opacity { transition: opacity 150ms ease; }
13
.transition-shadow { transition: box-shadow 150ms ease; }
14
.transition-transform { transition: transform 150ms ease; }
15
```
16

17
### Transition Duration
18

19
```scss { .api }
20
.duration-75 { transition-duration: 75ms; }
21
.duration-100 { transition-duration: 100ms; }
22
.duration-150 { transition-duration: 150ms; }
23
.duration-200 { transition-duration: 200ms; }
24
.duration-300 { transition-duration: 300ms; }
25
.duration-500 { transition-duration: 500ms; }
26
.duration-700 { transition-duration: 700ms; }
27
.duration-1000 { transition-duration: 1000ms; }
28
```
29

30
### Transition Timing Functions
31

32
```scss { .api }
33
.ease-linear { transition-timing-function: linear; }
34
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
35
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
36
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
37
```
38

39
### Transition Delay
40

41
```scss { .api }
42
.delay-75 { transition-delay: 75ms; }
43
.delay-100 { transition-delay: 100ms; }
44
.delay-150 { transition-delay: 150ms; }
45
.delay-200 { transition-delay: 200ms; }
46
.delay-300 { transition-delay: 300ms; }
47
.delay-500 { transition-delay: 500ms; }
48
.delay-700 { transition-delay: 700ms; }
49
.delay-1000 { transition-delay: 1000ms; }
50
```
51

52
## Transforms
53

54
### Scale
55

56
```scss { .api }
57
.scale-0 { transform: scale(0); }
58
.scale-50 { transform: scale(0.5); }
59
.scale-75 { transform: scale(0.75); }
60
.scale-90 { transform: scale(0.9); }
61
.scale-95 { transform: scale(0.95); }
62
.scale-100 { transform: scale(1); }
63
.scale-105 { transform: scale(1.05); }
64
.scale-110 { transform: scale(1.1); }
65
.scale-125 { transform: scale(1.25); }
66
.scale-150 { transform: scale(1.5); }
67
```
68

69
### Rotate
70

71
```scss { .api }
72
.rotate-0 { transform: rotate(0deg); }
73
.rotate-1 { transform: rotate(1deg); }
74
.rotate-2 { transform: rotate(2deg); }
75
.rotate-3 { transform: rotate(3deg); }
76
.rotate-6 { transform: rotate(6deg); }
77
.rotate-12 { transform: rotate(12deg); }
78
.rotate-45 { transform: rotate(45deg); }
79
.rotate-90 { transform: rotate(90deg); }
80
.rotate-180 { transform: rotate(180deg); }
81
.-rotate-1 { transform: rotate(-1deg); }
82
.-rotate-2 { transform: rotate(-2deg); }
83
.-rotate-3 { transform: rotate(-3deg); }
84
.-rotate-6 { transform: rotate(-6deg); }
85
.-rotate-12 { transform: rotate(-12deg); }
86
.-rotate-45 { transform: rotate(-45deg); }
87
.-rotate-90 { transform: rotate(-90deg); }
88
.-rotate-180 { transform: rotate(-180deg); }
89
```
90

91
### Translate
92

93
```scss { .api }
94
.translate-x-0 { transform: translateX(0); }
95
.translate-x-1 { transform: translateX(0.25rem); }
96
.translate-x-2 { transform: translateX(0.5rem); }
97
.translate-x-3 { transform: translateX(1rem); }
98
.translate-x-4 { transform: translateX(1.5rem); }
99
.translate-x-5 { transform: translateX(2rem); }
100
.translate-x-6 { transform: translateX(3rem); }
101
.translate-x-full { transform: translateX(100%); }
102
.-translate-x-1 { transform: translateX(-0.25rem); }
103
.-translate-x-2 { transform: translateX(-0.5rem); }
104
.-translate-x-3 { transform: translateX(-1rem); }
105
.-translate-x-4 { transform: translateX(-1.5rem); }
106
.-translate-x-5 { transform: translateX(-2rem); }
107
.-translate-x-6 { transform: translateX(-3rem); }
108
.-translate-x-full { transform: translateX(-100%); }
109

110
.translate-y-0 { transform: translateY(0); }
111
.translate-y-1 { transform: translateY(0.25rem); }
112
.translate-y-2 { transform: translateY(0.5rem); }
113
.translate-y-3 { transform: translateY(1rem); }
114
.translate-y-4 { transform: translateY(1.5rem); }
115
.translate-y-5 { transform: translateY(2rem); }
116
.translate-y-6 { transform: translateY(3rem); }
117
.translate-y-full { transform: translateY(100%); }
118
.-translate-y-1 { transform: translateY(-0.25rem); }
119
.-translate-y-2 { transform: translateY(-0.5rem); }
120
.-translate-y-3 { transform: translateY(-1rem); }
121
.-translate-y-4 { transform: translateY(-1.5rem); }
122
.-translate-y-5 { transform: translateY(-2rem); }
123
.-translate-y-6 { transform: translateY(-3rem); }
124
.-translate-y-full { transform: translateY(-100%); }
125
```
126

127
### Transform Origin
128

129
```scss { .api }
130
.origin-center { transform-origin: center; }
131
.origin-top { transform-origin: top; }
132
.origin-top-right { transform-origin: top right; }
133
.origin-right { transform-origin: right; }
134
.origin-bottom-right { transform-origin: bottom right; }
135
.origin-bottom { transform-origin: bottom; }
136
.origin-bottom-left { transform-origin: bottom left; }
137
.origin-left { transform-origin: left; }
138
.origin-top-left { transform-origin: top left; }
139
```
140

141
## Keyframe Animations
142

143
```scss { .api }
144
// Fade animations
145
.fadein { animation: fadein 150ms linear; }
146
.fadeout { animation: fadeout 150ms linear; }
147

148
// Scale animations
149
.scalein { animation: scalein 150ms linear; }
150

151
// Slide animations
152
.slidedown { animation: slidedown 150ms ease-out; }
153
.slideup { animation: slideup 150ms ease-out; }
154
.slideleft { animation: slideleft 150ms ease-out; }
155
.slideright { animation: slideright 150ms ease-out; }
156
```
157

158
### Animation Duration Variants
159

160
```scss { .api }
161
// Fade duration variants
162
.fadein-duration-100 { animation: fadein 100ms linear; }
163
.fadein-duration-200 { animation: fadein 200ms linear; }
164
.fadein-duration-300 { animation: fadein 300ms linear; }
165
.fadein-duration-500 { animation: fadein 500ms linear; }
166

167
.fadeout-duration-100 { animation: fadeout 100ms linear; }
168
.fadeout-duration-200 { animation: fadeout 200ms linear; }
169
.fadeout-duration-300 { animation: fadeout 300ms linear; }
170
.fadeout-duration-500 { animation: fadeout 500ms linear; }
171

172
// Scale duration variants
173
.scalein-duration-100 { animation: scalein 100ms linear; }
174
.scalein-duration-200 { animation: scalein 200ms linear; }
175
.scalein-duration-300 { animation: scalein 300ms linear; }
176
.scalein-duration-500 { animation: scalein 500ms linear; }
177

178
// Slide duration variants
179
.slidedown-duration-100 { animation: slidedown 100ms ease-out; }
180
.slidedown-duration-200 { animation: slidedown 200ms ease-out; }
181
.slidedown-duration-300 { animation: slidedown 300ms ease-out; }
182
.slidedown-duration-500 { animation: slidedown 500ms ease-out; }
183

184
// Similar patterns for slideup, slideleft, slideright
185
```
186

187
### Animation Properties
188

189
```scss { .api }
190
.animation-iteration-infinite { animation-iteration-count: infinite; }
191
.animation-iteration-1 { animation-iteration-count: 1; }
192
.animation-iteration-2 { animation-iteration-count: 2; }
193
.animation-iteration-3 { animation-iteration-count: 3; }
194

195
.animation-fill-none { animation-fill-mode: none; }
196
.animation-fill-forwards { animation-fill-mode: forwards; }
197
.animation-fill-backwards { animation-fill-mode: backwards; }
198
.animation-fill-both { animation-fill-mode: both; }
199

200
.animation-direction-normal { animation-direction: normal; }
201
.animation-direction-reverse { animation-direction: reverse; }
202
.animation-direction-alternate { animation-direction: alternate; }
203
.animation-direction-alternate-reverse { animation-direction: alternate-reverse; }
204
```
205

206
## Responsive Variants
207

208
All animation utilities support responsive breakpoints:
209

210
```scss { .api }
211
// Small screens (≥576px)
212
.sm\\:transition-all { /* transition: all 150ms ease at sm+ */ }
213
.sm\\:scale-105 { /* transform: scale(1.05) at sm+ */ }
214
.sm\\:fadein { /* animation: fadein 150ms linear at sm+ */ }
215
// ... all animation classes with sm: prefix
216

217
// Medium screens (≥768px)
218
.md\\:duration-300 { /* transition-duration: 300ms at md+ */ }
219
.md\\:rotate-45 { /* transform: rotate(45deg) at md+ */ }
220
.md\\:slidedown { /* animation: slidedown 150ms ease-out at md+ */ }
221
// ... all animation classes with md: prefix
222

223
// Large screens (≥992px)
224
.lg\\:transition-transform { /* transition: transform 150ms ease at lg+ */ }
225
.lg\\:scale-110 { /* transform: scale(1.1) at lg+ */ }
226
.lg\\:scalein-duration-300 { /* animation: scalein 300ms linear at lg+ */ }
227
// ... all animation classes with lg: prefix
228

229
// Extra large screens (≥1200px)
230
.xl\\:ease-in-out { /* transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) at xl+ */ }
231
.xl\\:translate-x-4 { /* transform: translateX(1.5rem) at xl+ */ }
232
.xl\\:fadeout-duration-500 { /* animation: fadeout 500ms linear at xl+ */ }
233
// ... all animation classes with xl: prefix
234
```
235

236
## Usage Examples
237

238
### Hover Effects
239

240
```html
241
<div class="grid">
242
  <div class="col-12 md:col-4">
243
    <div class="p-4 surface-card border-round shadow-1 cursor-pointer transition-all duration-300 hover:shadow-4 hover:scale-105">
244
      <h3 class="m-0 mb-2">Hover Scale</h3>
245
      <p class="m-0 text-color-secondary">Card scales up on hover</p>
246
    </div>
247
  </div>
248
  
249
  <div class="col-12 md:col-4">
250
    <div class="p-4 surface-card border-round shadow-2 cursor-pointer transition-colors duration-200 hover:bg-primary hover:text-white">
251
      <h3 class="m-0 mb-2">Color Transition</h3>
252
      <p class="m-0 opacity-70">Background changes on hover</p>
253
    </div>
254
  </div>
255
  
256
  <div class="col-12 md:col-4">
257
    <div class="p-4 surface-card border-round shadow-1 cursor-pointer transition-transform duration-300 hover:-translate-y-2">
258
      <h3 class="m-0 mb-2">Lift Effect</h3>
259
      <p class="m-0 text-color-secondary">Card lifts up on hover</p>
260
    </div>
261
  </div>
262
</div>
263
```
264

265
### Button Interactions
266

267
```html
268
<div class="flex flex-wrap gap-3">
269
  <!-- Scale button -->
270
  <button class="px-4 py-2 bg-primary text-white border-none border-round cursor-pointer transition-transform duration-150 hover:scale-105 active:scale-95">
271
    Scale Button
272
  </button>
273
  
274
  <!-- Slide button -->
275
  <button class="px-4 py-2 bg-green-500 text-white border-none border-round cursor-pointer transition-all duration-200 hover:-translate-y-1 hover:shadow-3">
276
    Lift Button
277
  </button>
278
  
279
  <!-- Rotate button -->
280
  <button class="relative px-4 py-2 bg-blue-500 text-white border-none border-round cursor-pointer transition-all duration-300 hover:bg-blue-600 overflow-hidden">
281
    <span class="relative z-1">Rotate Icon</span>
282
    <i class="pi pi-refresh absolute right-0 top-0 w-full h-full flex align-items-center justify-content-center transition-transform duration-300 hover:rotate-180"></i>
283
  </button>
284
</div>
285
```
286

287
### Loading Animations
288

289
```html
290
<div class="flex align-items-center gap-4">
291
  <!-- Spinning loader -->
292
  <div class="w-3rem h-3rem border-3 border-primary border-right-transparent border-circle animate-spin"></div>
293
  
294
  <!-- Pulsing loader -->
295
  <div class="w-3rem h-3rem bg-primary border-circle animation-iteration-infinite" style="animation: pulse 2s ease-in-out infinite;"></div>
296
  
297
  <!-- Bouncing dots -->
298
  <div class="flex gap-1">
299
    <div class="w-0-5rem h-0-5rem bg-primary border-circle animation-iteration-infinite" style="animation: bounce 1.4s ease-in-out infinite; animation-delay: 0s;"></div>
300
    <div class="w-0-5rem h-0-5rem bg-primary border-circle animation-iteration-infinite" style="animation: bounce 1.4s ease-in-out infinite; animation-delay: 0.2s;"></div>
301
    <div class="w-0-5rem h-0-5rem bg-primary border-circle animation-iteration-infinite" style="animation: bounce 1.4s ease-in-out infinite; animation-delay: 0.4s;"></div>
302
  </div>
303
</div>
304
```
305

306
### Modal Entrance Animations
307

308
```html
309
<!-- Modal backdrop -->
310
<div class="fixed inset-0 bg-black-alpha-50 flex align-items-center justify-content-center z-5 fadein-duration-200">
311
  <!-- Modal content -->
312
  <div class="relative w-full max-w-30rem mx-3 bg-white border-round shadow-8 scalein-duration-300">
313
    <div class="p-6">
314
      <h2 class="m-0 mb-4 text-xl font-bold">Animated Modal</h2>
315
      <p class="m-0 mb-6 text-color-secondary">This modal appears with fade and scale animations.</p>
316
      
317
      <div class="flex gap-2 justify-content-end">
318
        <button class="px-4 py-2 border-1 border-surface-300 bg-transparent border-round transition-colors duration-150 hover:bg-surface-100">
319
          Cancel
320
        </button>
321
        <button class="px-4 py-2 bg-primary text-white border-none border-round transition-all duration-150 hover:bg-primary-600 hover:scale-105">
322
          Confirm
323
        </button>
324
      </div>
325
    </div>
326
  </div>
327
</div>
328
```
329

330
### Slide-in Notifications
331

332
```html
333
<div class="fixed top-0 right-0 m-4 z-5">
334
  <div class="p-4 bg-green-500 text-white border-round shadow-4 slideright-duration-300">
335
    <div class="flex align-items-center gap-2">
336
      <i class="pi pi-check-circle text-lg"></i>
337
      <div>
338
        <div class="font-semibold">Success!</div>
339
        <div class="text-sm opacity-90">Operation completed successfully.</div>
340
      </div>
341
    </div>
342
  </div>
343
</div>
344
```
345

346
### Image Gallery with Transitions
347

348
```html
349
<div class="grid">
350
  <div class="col-12 md:col-6 lg:col-4">
351
    <div class="relative overflow-hidden border-round cursor-pointer">
352
      <img src="gallery1.jpg" alt="Gallery image" class="w-full h-15rem object-cover transition-transform duration-500 hover:scale-110">
353
      <div class="absolute inset-0 bg-black-alpha-50 flex align-items-center justify-content-center opacity-0 transition-opacity duration-300 hover:opacity-100">
354
        <span class="text-white font-semibold">View Image</span>
355
      </div>
356
    </div>
357
  </div>
358
  
359
  <div class="col-12 md:col-6 lg:col-4">
360
    <div class="relative overflow-hidden border-round cursor-pointer">
361
      <img src="gallery2.jpg" alt="Gallery image" class="w-full h-15rem object-cover transition-all duration-300 hover:scale-105 hover:brightness-110">
362
      <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black-alpha-70 to-transparent translate-y-full transition-transform duration-300 hover:translate-y-0">
363
        <h3 className="m-0 text-white font-semibold">Image Title</h3>
364
        <p className="m-0 text-white-alpha-90 text-sm">Image description</p>
365
      </div>
366
    </div>
367
  </div>
368
</div>
369
```
370

371
### Navigation Menu Animations
372

373
```html
374
<nav class="p-4 bg-white shadow-1">
375
  <div class="flex align-items-center justify-content-between">
376
    <div class="text-xl font-bold text-primary">Brand</div>
377
    
378
    <div class="hidden md:flex gap-6">
379
      <a href="#" class="relative text-color no-underline py-2 transition-colors duration-200 hover:text-primary">
380
        Home
381
        <span class="absolute bottom-0 left-0 w-0 h-0-125rem bg-primary transition-all duration-300 hover:w-full"></span>
382
      </a>
383
      <a href="#" class="relative text-color no-underline py-2 transition-colors duration-200 hover:text-primary">
384
        About
385
        <span class="absolute bottom-0 left-0 w-0 h-0-125rem bg-primary transition-all duration-300 hover:w-full"></span>
386
      </a>
387
      <a href="#" class="relative text-color no-underline py-2 transition-colors duration-200 hover:text-primary">
388
        Contact
389
        <span class="absolute bottom-0 left-0 w-0 h-0-125rem bg-primary transition-all duration-300 hover:w-full"></span>
390
      </a>
391
    </div>
392
    
393
    <!-- Mobile menu button -->
394
    <button class="md:hidden w-3rem h-3rem flex align-items-center justify-content-center border-none bg-transparent cursor-pointer">
395
      <div class="flex flex-column gap-1">
396
        <span class="w-1-5rem h-0-125rem bg-color transition-transform duration-300"></span>
397
        <span class="w-1-5rem h-0-125rem bg-color transition-opacity duration-300"></span>
398
        <span class="w-1-5rem h-0-125rem bg-color transition-transform duration-300"></span>
399
      </div>
400
    </button>
401
  </div>
402
</nav>
403
```
404

405
### Form Field Animations
406

407
```html
408
<form class="p-4 surface-section border-round">
409
  <div class="mb-4">
410
    <div class="relative">
411
      <input 
412
        type="text" 
413
        class="w-full p-3 border-1 border-surface-300 border-round transition-all duration-200 focus:border-primary focus:shadow-2"
414
        placeholder="Enter your name"
415
      >
416
    </div>
417
  </div>
418
  
419
  <div class="mb-6">
420
    <div class="relative">
421
      <textarea 
422
        rows="4" 
423
        class="w-full p-3 border-1 border-surface-300 border-round transition-all duration-200 focus:border-primary focus:shadow-2 resize-none"
424
        placeholder="Enter your message"
425
      ></textarea>
426
    </div>
427
  </div>
428
  
429
  <button 
430
    type="submit" 
431
    class="px-6 py-3 bg-primary text-white border-none border-round cursor-pointer transition-all duration-200 hover:bg-primary-600 hover:-translate-y-1 hover:shadow-3 active:translate-y-0"
432
  >
433
    Submit Form
434
  </button>
435
</form>
436
```
437

438
### Progress Indicators
439

440
```html
441
<div class="p-4 surface-card border-round shadow-2">
442
  <h3 class="m-0 mb-4">Upload Progress</h3>
443
  
444
  <!-- Progress bar -->
445
  <div class="relative w-full h-0-5rem bg-surface-200 border-round overflow-hidden mb-3">
446
    <div class="absolute top-0 left-0 h-full bg-primary transition-all duration-500 ease-out" style="width: 65%;"></div>
447
  </div>
448
  
449
  <!-- Step indicators -->
450
  <div class="flex align-items-center justify-content-between">
451
    <div class="flex align-items-center gap-2">
452
      <div class="w-2rem h-2rem bg-primary text-white border-circle flex align-items-center justify-content-center text-sm font-bold transition-all duration-300 scale-100">
453
        ✓
454
      </div>
455
      <span class="text-sm text-primary font-medium">Upload</span>
456
    </div>
457
    
458
    <div class="flex align-items-center gap-2">
459
      <div class="w-2rem h-2rem bg-primary text-white border-circle flex align-items-center justify-content-center text-sm font-bold transition-all duration-300 scale-110 shadow-2">
460
        2
461
      </div>
462
      <span class="text-sm text-primary font-medium">Processing</span>
463
    </div>
464
    
465
    <div class="flex align-items-center gap-2">
466
      <div class="w-2rem h-2rem bg-surface-300 text-surface-600 border-circle flex align-items-center justify-content-center text-sm font-bold transition-all duration-300">
467
        3
468
      </div>
469
      <span class="text-sm text-surface-500">Complete</span>
470
    </div>
471
  </div>
472
</div>
473
```