✨ feat: add fade up animation to post page, optimize global animation curves and durations, refine animation-related naming conventions

src/styles/animation.css

@@ -0,0 +1,74 @@
+/* View Transition */
+::view-transition-new(animation-theme-toggle) {
+  animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1);
+  clip-path: inset(0 0 0 0);
+  z-index: 99;
+}
+::view-transition-old(animation-theme-toggle) {
+  animation: none;
+  z-index: -1;
+}
+@keyframes reveal {
+  from {
+    clip-path: inset(var(--from));
+  }
+}
+
+html.dark {
+  --from: 0 0 100% 0;
+}
+html:not(.dark) {
+  --from: 100% 0 0 0;
+}
+
+/* Disable animations for special elements during theme switching */
+html[data-theme-changing] [data-disable-theme-transition] {
+  view-transition-name: none !important;
+}
+
+/* Fallback animation when view-transition-name is not supported */
+@supports not (view-transition-name: none) {
+  html {
+    --at-apply: 'transition-colors duration-300 ease-out';
+  }
+}
+
+/* Fade Up Animation >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(3rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animation-fade-up > * {
+  opacity: 0;
+}
+.animation-fade-up > *:nth-child(-n+20) {
+  animation: fadeUp 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  animation-delay: calc((var(--animation-order, 0) - 1) * 0.08s);
+}
+.animation-fade-up > *:nth-child(1) { --animation-order: 1; }
+.animation-fade-up > *:nth-child(2) { --animation-order: 2; }
+.animation-fade-up > *:nth-child(3) { --animation-order: 3; }
+.animation-fade-up > *:nth-child(4) { --animation-order: 4; }
+.animation-fade-up > *:nth-child(5) { --animation-order: 5; }
+.animation-fade-up > *:nth-child(6) { --animation-order: 6; }
+.animation-fade-up > *:nth-child(7) { --animation-order: 7; }
+.animation-fade-up > *:nth-child(8) { --animation-order: 8; }
+.animation-fade-up > *:nth-child(9) { --animation-order: 9; }
+.animation-fade-up > *:nth-child(10) { --animation-order: 10; }
+.animation-fade-up > *:nth-child(11) { --animation-order: 11; }
+.animation-fade-up > *:nth-child(12) { --animation-order: 12; }
+.animation-fade-up > *:nth-child(13) { --animation-order: 13; }
+.animation-fade-up > *:nth-child(14) { --animation-order: 14; }
+.animation-fade-up > *:nth-child(15) { --animation-order: 15; }
+.animation-fade-up > *:nth-child(16) { --animation-order: 16; }
+.animation-fade-up > *:nth-child(17) { --animation-order: 17; }
+.animation-fade-up > *:nth-child(18) { --animation-order: 18; }
+.animation-fade-up > *:nth-child(19) { --animation-order: 19; }
+.animation-fade-up > *:nth-child(20) { --animation-order: 20; }

src/styles/extend.css

@@ -1,7 +1,7 @@
 /* GitHub Card */
 .gc-container {
   --at-apply: 'block mb-4 px-5 py-4 overflow-x-auto uno-round-border bg-secondary/5';
-  --at-apply: 'transition-colors lg:(px-6 py-5) hover:(bg-secondary/10 c-primary)';
+  --at-apply: 'transition-colors duration-300 ease-out lg:(px-6 py-5) hover:(bg-secondary/10 c-primary)';
   scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.15) transparent;
 }
 

src/styles/global.css

@@ -30,7 +30,7 @@ h4:hover .heading-anchor-link svg {
   --at-apply: 'op-80';
 }
 .heading-anchor-link svg {
-  --at-apply: 'ml-0.4em aspect-square w-0.9em op-0 transition-opacity active:scale-90';
+  --at-apply: 'ml-0.4em aspect-square w-0.9em op-0 transition-opacity duration-300 ease-out active:scale-90';
 }
 h1:hover .heading-anchor-link svg:hover,
 h2:hover .heading-anchor-link svg:hover,
@@ -65,41 +65,6 @@ h4:hover .heading-anchor-link svg:hover {
   }
 }
 
-/* View Transition with Theme Toggle >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
-::view-transition-new(theme-transition) {
-  animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1);
-  clip-path: inset(0 0 0 0);
-  z-index: 99;
-}
-::view-transition-old(theme-transition) {
-  animation: none;
-  z-index: -1;
-}
-@keyframes reveal {
-  from {
-    clip-path: inset(var(--from));
-  }
-}
-
-html.dark {
-  --from: 0 0 100% 0;
-}
-html:not(.dark) {
-  --from: 100% 0 0 0;
-}
-
-/* Disable animations for other elements during theme switching */
-html[data-theme-transition] [data-disable-transition-on-theme] {
-  view-transition-name: none !important;
-}
-
-/* Fallback animation when view-transition-name is not supported */
-@supports not (view-transition-name: none) {
-  html:not([data-restore-theme]) {
-    --at-apply: 'transition-colors duration-300 ease-out';
-  }
-}
-
 /* Snell Roundhand Static Font >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
 @font-face {
   font-family: "Snell-Bold";

src/styles/heti.css

@@ -60,7 +60,7 @@
 /* Links */
 .heti :where(a:not(.gc-container)) {
   --at-apply: 'break-all font-semibold tracking-0 underline underline-0.075em decoration-secondary/80 underline-offset-0.1em';
-  --at-apply: 'transition-colors hover:(c-primary decoration-primary/80) lg:underline-0.1em';
+  --at-apply: 'transition-colors duration-300 ease-out hover:(c-primary decoration-primary/80) lg:underline-0.1em';
 }
 
 /* Images */