Animations
Transition timings, durations, and animation definitions used throughout the site.
Transition Timings
Shared durations from --transition-*. Hover each box to feel the difference — the demo applies the real token, and the resolved duration is read live.
--transition-fast
…
Quick feedback on hover states and micro-interactions
--transition-base
…
Default transition for interactive elements and state changes
--transition-slow
…
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.