mm

2026-05-07 02:15:20 +08:00
parent da0a6d0f81
commit ccc46844b6
141 changed files with 2358 additions and 1661 deletions
--- a/packages/css/utility/animate.css
+++ b/packages/css/utility/animate.css
@@ -0,0 +1,105 @@
+@layer utility {
+  .animate-fade-in-down {
+    animation: var(--animate-fade-in-down);
+
+    @keyframes fade-in-down {
+      from {
+        opacity: 0;
+        transform: translate3d(0, -100%, 0);
+      }
+      to {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+      }
+    }
+  }
+  .animate-fade-out-down {
+    animation: var(--animate-fade-out-down);
+  }
+
+  @keyframes fade-out-down {
+    from {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      opacity: 0;
+      transform: translate3d(0, 100%, 0);
+    }
+  }
+  .animate-fade-in-up {
+    animation: var(--animate-fade-in-up);
+  }
+
+  @keyframes fade-in-up {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 100%, 0);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+  .animate-fade-out-up {
+    animation: var(--animate-fade-out-up);
+  }
+
+  @keyframes fade-out-up {
+    from {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      opacity: 0;
+      transform: translate3d(0, -100%, 0);
+    }
+  }
+  .animate-spin {
+    animation: var(--animate-spin);
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  }
+  .animate-ping {
+    animation: var(--animate-ping);
+
+    @keyframes ping {
+      75%,
+      100% {
+        transform: scale(2);
+        opacity: 0;
+      }
+    }
+  }
+  .animate-pulse {
+    animation: var(--animate-pulse);
+
+    @keyframes pulse {
+      50% {
+        opacity: 0.5;
+      }
+    }
+  }
+  .animate-bounce {
+    animation: var(--animate-bounce); /* bounce 1s infinite */
+
+    @keyframes bounce {
+      0%,
+      100% {
+        transform: translateY(-25%);
+        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+      }
+      50% {
+        transform: none;
+        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      }
+    }
+  }
+  .animate-none {
+    animation: none;
+  }
+}