vinny/iptv-stream-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Complete 4.1.1: Transition Library - CSS transition utilities, timing functions, and duration constants

Browse source
This commit is contained in:
VinnyNC 2025-09-29 22:37:40 -04:00
parent 927e45ed76
commit 8cab28df91
2 changed files with 338 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

19
UI_UPDATE.MD
View file

@ -424,10 +424,21 @@ All components now consistently scale and behave appropriately across devices wh
### Sub-task 4.1: Animations and Transitions System
#### 4.1.1: Transition Library
- [ ] Implement CSS transition utilities
- [ ] Create consistent timing functions
- [ ] Define transition duration constants
#### 4.1.1: Transition Library - COMPLETED 9/29/2025
- [x] Implement CSS transition utilities
- [x] Create consistent timing functions
- [x] Define transition duration constants
**Notes:** Comprehensive transition and animation utilities library implemented in utilities.css with:
- **CSS Custom Properties**: --duration-fast (150ms), --duration-normal (250ms), --duration-slow (350ms), --animation-duration-fast (200ms), --animation-duration-normal (300ms), --animation-duration-slow (500ms), and timing functions (--timing-linear, --timing-ease, etc.) defined in :root
- **Transition Property Utilities**: .transition-all, .transition-colors, .transition-opacity, .transition-shadow, .transition-transform, and .transition-text classes targeting specific CSS properties
- **Transition Duration Utilities**: .duration-fast, .duration-normal, .duration-slow, and precise durations from .duration-75 to .duration-1000
- **Timing Function Utilities**: .ease-linear, .ease-in, .ease-out, .ease-in-out, .ease-spring, and .ease-bounce for different animation feels
- **Keyframe Animations**: Comprehensive set of @keyframes for fade, slide, scale, pulse, bounce, spin, ping, and shake animations
- **Animation Utility Classes**: .animate-fade-in, .animate-slide-in-left, .animate-scale-out, .animate-pulse, .animate-spin, etc. using the CSS custom properties for consistent timing
- **Animation Modifiers**: Duration modifiers, timing function modifiers, direction and fill mode controls, and play state controls
- **Hover Transition Utilities**: .hover-transition, .hover-scale, .hover-opacity, and .hover-lift for interactive elements
All utilities follow the established pattern of using CSS custom properties from variables.css for maintainability and consistency.
#### 4.1.2: Component Animations
- [ ] Add smooth state transitions