Skip to content

feat: implement CSS animation library and apply utilities - #303

Open
Devadakene wants to merge 3 commits into
Epta-Node:mainfrom
Devadakene:feat/css-animation-library
Open

feat: implement CSS animation library and apply utilities#303
Devadakene wants to merge 3 commits into
Epta-Node:mainfrom
Devadakene:feat/css-animation-library

Conversation

@Devadakene

Copy link
Copy Markdown

Closes #238

Summary

Introduces a shared library of CSS animation utilities and micro-interactions to ensure visual consistency and reduce animation-related bugs across the frontend.

Changes

  • Created frontend/src/styles/animations.css with .fade-in, .slide-up, .scale-in, and .pulse utility classes utilizing GPU-accelerated properties (opacity and transform).
  • Created frontend/src/styles/micro-interactions.css with hover effects (.hover-lift, .hover-glow, .hover-scale), a keyboard-only .focus-ring, and standard transition duration classes (.transition-fast, .transition-normal, .transition-slow).
  • Imported the new styles globally into frontend/src/styles/global.css.
  • Refactored frontend/src/components/landing/Hero.tsx to replace framer-motion implementations with our new native CSS animation utilities for lightweight rendering.
  • Applied the .hover-lift micro-interaction utility to the cards in frontend/src/components/dashboard/KpiCard.tsx.
  • Ensured all animations and transitions strictly respect prefers-reduced-motion: reduce for accessibility.

Testing

  • Verified smooth 60fps operation without regressions using the Chrome DevTools Performance tab.
  • Manually checked hover and focus interactions to ensure correct behavior and visual polish.
  • Tested prefers-reduced-motion: reduce emulation in DevTools to ensure all animations are instantly skipped when requested by user settings.

Related Issue

Checklist

  • Tests pass
  • Lint is clean
  • Documentation updated if needed

@vercel

vercel Bot commented Aug 21, 2026

Copy link
Copy Markdown

@Devadakene is attempting to deploy a commit to the Jaja's projects Team on Vercel.

A member of the Team first needs to authorize it.

@devJaja
devJaja self-requested a review August 22, 2026 04:36
@devJaja

devJaja commented Aug 24, 2026

Copy link
Copy Markdown
Contributor

Nice Implementation @Devadakene

kindly resolve the conflicts

@devJaja

devJaja commented Aug 24, 2026

Copy link
Copy Markdown
Contributor

@Devadakene

All CI checks passed, just resolve the conflicts and your pull request will be merge

@devJaja

devJaja commented Aug 26, 2026

Copy link
Copy Markdown
Contributor

@Devadakene Well done @Devadakene

Kindly fix the CI/frontend check failing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(ui): Add CSS Animation Utilities and Micro-Interaction Library

2 participants