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-radius: var(--radius);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
box-shadow: var(--shadow-sm);
|
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 {
|
.stat-card h3 {
|
||||||
@@ -544,14 +550,24 @@ html[dir="rtl"] .nav-lang-toggle {
|
|||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes fadeUp {
|
||||||
|
from { opacity: 0; transform: translateY(8px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
.chart-card {
|
.chart-card {
|
||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
position: relative;
|
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 {
|
.toggle-corner {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
@@ -835,6 +851,12 @@ table tbody tr:hover {
|
|||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
box-shadow: var(--shadow-sm);
|
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 {
|
.metric-card h4 {
|
||||||
|
|||||||
Reference in New Issue
Block a user