From 268cd00fc71b99182176b5818f622c5be71b25fd Mon Sep 17 00:00:00 2001 From: juanatsap Date: Sun, 16 Nov 2025 14:39:03 +0000 Subject: [PATCH] feat: add staggered cascade animation to buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implemented beautiful cascading animation effect where each button animates individually with a staggered delay. Changes: - Each button now has transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) - Added nth-child selectors with progressive delays: * Button 1: 0.05s delay * Button 2: 0.10s delay * Button 3: 0.15s delay * Button 4: 0.20s delay * Button 5: 0.25s delay Effect: When viewport changes (desktop ↔ mobile), buttons don't move as a group. Instead, they cascade one by one creating a wave-like animation: - Desktop→Mobile: Buttons flow from vertical to horizontal sequentially - Mobile→Desktop: Buttons stack from horizontal to vertical one by one This creates a much cooler, more polished animation than moving all buttons simultaneously. The 50ms stagger creates perfect visual rhythm. --- static/css/main.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/static/css/main.css b/static/css/main.css index f550c79..56b0b26 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -2861,11 +2861,18 @@ html { align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); - transition: all 0.3s ease; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Same smooth easing */ opacity: 0.6; margin: 0; /* Remove any margins */ } +/* Staggered animation delays - each button animates one by one */ +.fixed-buttons-container > *:nth-child(1) { transition-delay: 0.05s; } +.fixed-buttons-container > *:nth-child(2) { transition-delay: 0.10s; } +.fixed-buttons-container > *:nth-child(3) { transition-delay: 0.15s; } +.fixed-buttons-container > *:nth-child(4) { transition-delay: 0.20s; } +.fixed-buttons-container > *:nth-child(5) { transition-delay: 0.25s; } + /* Legacy selector for backwards compatibility */ .info-button { background: var(--black-bar);