Delight: Add micro-interactions and entrance animations
All checks were successful
Deploy HiHala Dashboard / deploy (push) Successful in 6s

- Stat cards lift on hover (translateY -2px + shadow elevation)
- Metric cards lift on hover
- Chart cards fade-up with staggered delays on mount
- All animations respect prefers-reduced-motion (already in place)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
fahed
2026-03-25 18:30:21 +03:00
parent 784a914ebf
commit 7d919979cc

View File

@@ -509,6 +509,12 @@ html[dir="rtl"] .nav-lang-toggle {
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.stat-card h3 {
@@ -544,14 +550,24 @@ html[dir="rtl"] .nav-lang-toggle {
margin-bottom: 32px;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.chart-card {
background: var(--surface);
padding: 24px;
border-radius: var(--radius);
border: 1px solid var(--border);
position: relative;
animation: fadeUp 0.4s ease-out both;
}
.chart-card:nth-child(2) { animation-delay: 0.05s; }
.chart-card:nth-child(3) { animation-delay: 0.1s; }
.chart-card:nth-child(4) { animation-delay: 0.15s; }
.toggle-corner {
position: absolute;
top: 20px;
@@ -835,6 +851,12 @@ table tbody tr:hover {
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.metric-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.metric-card h4 {