Delight: Add micro-interactions and entrance animations
All checks were successful
Deploy HiHala Dashboard / deploy (push) Successful in 6s
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:
22
src/App.css
22
src/App.css
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user