qreastech/MNQ-Catering-y-Evento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: slower entrance animations for a more elegant feel

Browse Source
This commit is contained in:
Manuel
2026-05-10 16:24:36 +02:00
parent cc55641edf
commit 62355e154d
1 changed files with 15 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/animations.css
+15 -28
View File
@@ -7,15 +7,10 @@
.reveal { .reveal {
opacity: 0; opacity: 0;
transform: translateY(28px); transform: translateY(32px);
transition: transition:
opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1),
transform 800ms cubic-bezier(0.22, 1, 0.36, 1); transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
} }
/* stagger via CSS variable set by JS */ /* stagger via CSS variable set by JS */
@@ -24,14 +19,10 @@
/* Variante horizontal (desde izquierda) */ /* Variante horizontal (desde izquierda) */
.reveal-left { .reveal-left {
opacity: 0; opacity: 0;
transform: translateX(-32px); transform: translateX(-40px);
transition: transition:
opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), opacity 1300ms cubic-bezier(0.22, 1, 0.36, 1),
transform 900ms cubic-bezier(0.22, 1, 0.36, 1); transform 1300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.visible {
opacity: 1;
transform: translateX(0);
} }
/* Variante scale (para imágenes de galería) */ /* Variante scale (para imágenes de galería) */
@@ -39,12 +30,8 @@
opacity: 0; opacity: 0;
transform: scale(0.94); transform: scale(0.94);
transition: transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
transform 700ms cubic-bezier(0.22, 1, 0.36, 1); transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-scale.visible {
opacity: 1;
transform: scale(1);
} }
/* ─── HERO ENTRANCE ──────────────────────────── */ /* ─── HERO ENTRANCE ──────────────────────────── */
@@ -52,8 +39,8 @@
@keyframes mnq-rise { @keyframes mnq-rise {
from { from {
opacity: 0; opacity: 0;
transform: translateY(36px); transform: translateY(40px);
filter: blur(4px); filter: blur(6px);
} }
to { to {
opacity: 1; opacity: 1;
@@ -63,12 +50,12 @@
} }
.hero-enter { .hero-enter {
animation: mnq-rise 1000ms cubic-bezier(0.22, 1, 0.36, 1) both; animation: mnq-rise 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
} }
.hero-enter-1 { animation-delay: 200ms; } .hero-enter-1 { animation-delay: 300ms; }
.hero-enter-2 { animation-delay: 500ms; } .hero-enter-2 { animation-delay: 700ms; }
.hero-enter-3 { animation-delay: 780ms; } .hero-enter-3 { animation-delay: 1100ms; }
.hero-enter-4 { animation-delay: 1050ms; } .hero-enter-4 { animation-delay: 1500ms; }
/* ─── GOLD SHIMMER (botones) ─────────────────── */ /* ─── GOLD SHIMMER (botones) ─────────────────── */