feat: slower entrance animations for a more elegant feel

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