File size: 2,731 Bytes
96dd062 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | /* ==========================================================================
Page Transition Animations (Swup) & Global Animations
========================================================================== */
/* --------------------------------------------------------------------------
1. Swup Page Transitions
-------------------------------------------------------------------------- */
/* Main Content Transition */
.transition-main {
transition:
opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Leaving Animation */
.transition-leaving {
transition:
transform 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19),
opacity 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
/* State: Changing (Swup) */
html.is-changing .transition-main {
transition:
opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
html.is-leaving .transition-main {
transition:
opacity 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19),
transform 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
/* State: Animating (Entering) */
html.is-animating .transition-main {
opacity: 0;
transform: translateY(1.5rem) translateX(0.5rem);
}
/* State: Leaving */
html.is-animating.is-leaving .transition-leaving {
transform: translateY(-1rem) translateX(-0.5rem);
opacity: 0;
}
/* Swup Fade Fallback */
html.is-changing .transition-swup-fade {
transition: all 300ms ease-out;
}
html.is-animating .transition-swup-fade {
opacity: 0;
transform: translateY(1.5rem);
}
/* --------------------------------------------------------------------------
2. Keyframes
-------------------------------------------------------------------------- */
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(1.5rem) translateX(0.5rem);
}
to {
opacity: 1;
transform: translateY(0) translateX(0);
}
}
/* --------------------------------------------------------------------------
3. Onload Animations
-------------------------------------------------------------------------- */
.onload-animation {
opacity: 0;
animation: fade-in-up 200ms ease-out forwards;
}
/* 渐进式动画延迟 */
.onload-animation:nth-child(1) { animation-delay: 0ms; }
.onload-animation:nth-child(2) { animation-delay: 50ms; }
.onload-animation:nth-child(3) { animation-delay: 100ms; }
.onload-animation:nth-child(4) { animation-delay: 150ms; }
.onload-animation:nth-child(5) { animation-delay: 200ms; }
|