feat: slower entrance animations for a more elegant feel
This commit is contained in:
+15
-28
@@ -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) ─────────────────── */
|
||||
|
||||
|
||||
Reference in New Issue
Block a user