[DESIGN-004] Add staggered layered animations to hero section (feat)
Some checks failed
CD - Build & Deploy / build-and-push (push) Has been cancelled
CD - Build & Deploy / package-helm (push) Has been cancelled
CD - Build & Deploy / deploy-staging (push) Has been cancelled
CD - Build & Deploy / deploy-production (push) Has been cancelled
CD - Build & Deploy / release (push) Has been cancelled
CI / test (3.11) (push) Has been cancelled
CI / test (3.12) (push) Has been cancelled
CI / security (push) Has been cancelled

- Implemented sequential fade-in animations for all hero elements
- Each element appears with timed delay (0.2s → 1.3s)
- Added fadeInUp, fadeInScale, slideInRight animations
- Main illustration fades in at 0.3s
- Floating cards appear sequentially (0.9s, 1.1s, 1.3s)
- Text and buttons animate from bottom to top
- Smooth professional loading experience
- Mimics layered reveal seen in premium themes

Animation Timeline:
- 0.2s: Coming soon badge
- 0.3s: Main illustration
- 0.4s: Heading
- 0.6s: Description
- 0.8s: Primary button
- 1.0s: Secondary button
- 0.9s-1.3s: Floating stats cards
This commit is contained in:
Ehsan.Asadi
2025-12-26 16:40:08 +03:30
parent 9ad6ba6449
commit 1dab36d4ef
3 changed files with 75 additions and 5 deletions

View File

@@ -46,3 +46,36 @@ body {
50% { transform: scale(1.05) translateY(-15px); }
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(60px) scale(0.9);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideInRight {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}