Animations
Transition timings, durations, and animation definitions used throughout the site.
Transition Timings
transition-fast
150ms ease
Quick feedback on hover states and micro-interactions
transition-base
200ms ease
Default transition for interactive elements and state changes
transition-slow
300ms ease
Deliberate transitions for visibility changes and theme switching
Animation Examples
Fade & Slide In
Used for page transitions and content reveal animations
Scroll Seamless
25s linear infinite
Continuous scrolling for testimonials or feature lists
Interactive Transitions
Hover Color Change
transition-colors — smoothly animates color changes on hover
Hover Shadow Elevation
transition-shadow — lifts element on hover with smooth shadow transition
Arrow Transform
→transition-transform — subtle movement on interaction
Usage Guidelines
Respect User Preferences
Always check prefers-reduced-motion. Disable animations for users who prefer reduced motion.
Use Transitions for Feedback
Transitions should provide visual feedback for user actions, not distract. Keep animations purposeful.
Keep it Snappy
Use fast transitions (150-200ms) for UI feedback. Reserve slower animations for significant state changes.
Avoid Animation Bloat
Only animate properties that matter (opacity, transform, colors). Avoid animating layout properties like width or height.