OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

feat: Add staggered entrance and icon pop-in animation for feature section cards

Browse Source
This commit is contained in:
Matt Batchelder
2026-03-22 01:40:10 -04:00
parent 8a2cd6ef41
commit b14e137933
3 changed files with 87 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
theme/assets/css/main.css
View File

@@ -112,8 +112,21 @@ a:hover { color: var(--color-primary); }
transform: translateY(0);
/* !important ensures this wins over transition: all on .oribi-card
(same selector specificity, but .oribi-card appears later in the
stylesheet and would otherwise override this). */
transition: opacity .5s ease, transform .5s ease !important;
stylesheet and would otherwise override this).
var(--scroll-delay) is set per-card by demo-animator.js to produce
a staggered entrance when multiple cards reveal at once. */
transition: opacity .5s ease var(--scroll-delay, 0s), transform .5s ease var(--scroll-delay, 0s) !important;
}
/* Icon pop-in animation — triggered by demo-animator.js when a
feature-section card enters the viewport. */
@keyframes icon-pop {
0% { transform: scale(0.5); opacity: 0; }
60% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(1); }
}
.feature-icon.icon-pop {
animation: icon-pop 0.4s ease-out backwards;
}
/* Smooth theme transition */