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

animations

Browse Source
This commit is contained in:
Matt Batchelder
2026-05-12 16:27:37 -04:00
parent d923a62846
commit 1a3bd907e9
1 changed files with 1 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -130,48 +130,7 @@ a:hover { color: var(--color-primary); }
animation: icon-pop 0.4s ease-out backwards;
}
/* ── Ambient feature-icon animations ──────────────────────────
Continuous "alive" motion inside feature cards, inspired by
the design page platform-row visual animations. Combines a
gentle float with a sonar-pulse ring on the icon. */
@keyframes icon-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@keyframes icon-ring {
0% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.35); }
60% { box-shadow: 0 0 0 10px rgba(var(--color-primary-rgb), 0); }
100% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0); }
}
@keyframes icon-cog-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Float + ring on all feature/value icons (but only once the card has
scroll-revealed — the .is-animated class is set by demo-animator.js). */
.oribi-card.is-animated .feature-icon,
.oribi-card.is-animated .value-icon {
animation: icon-float 3.6s ease-in-out infinite,
icon-ring 3.6s ease-out infinite;
}
/* Pause ambient animation during hover so the scale transform
from .oribi-card:hover .feature-icon / .value-icon takes over cleanly. */
.oribi-card:hover .feature-icon,
.oribi-card:hover .value-icon {
animation: none;
}
/* Cog icons spin slowly — contextually appropriate regardless of card. */
.feature-icon .fa-cog,
.feature-icon .fa-users-cog {
animation: icon-cog-spin 8s linear infinite;
}
/* Respect reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
.oribi-card.is-animated .feature-icon,
.oribi-card.is-animated .value-icon { animation: none; }
.feature-icon .fa-cog,
.feature-icon .fa-users-cog { animation: none; }
}
/* Smooth theme transition */
body,