feat: add new animation to transactions action bar

app/templates/cotton/ui/transactions_action_bar.html

@@ -2,7 +2,9 @@
 <div class="tw-sticky tw-bottom-4 tw-left-0 tw-right-0 tw-z-50 tw-hidden mx-auto tw-w-fit" id="actions-bar"
      _="on change from #transactions-list or htmx:afterSettle from window
           if no <input[type='checkbox']:checked/> in #transactions-list
-            add .tw-hidden to #actions-bar
+            add .slide-in-bottom-reverse then settle
+            then add .tw-hidden to #actions-bar
+            then remove .slide-in-bottom-reverse
           else
             remove .tw-hidden from #actions-bar
             then trigger selected_transactions_updated
@@ -10,6 +12,7 @@
         end">
   <div class="card slide-in-left">
     <div class="card-body p-2">
+  <div class="card slide-in-bottom">
       {% spaceless %}
         <div class="btn-group" role="group">
           <button class="btn btn-secondary btn-sm"

frontend/src/styles/_animations.scss

@@ -205,3 +205,35 @@
 .flashing {
   animation: flash 1s infinite;
 }
+
+
+.slide-in-bottom {
+	animation: slide-in-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+.slide-in-bottom-reverse {
+	animation: slide-in-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2025-1-25 12:30:4
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation slide-in-bottom
+ * ----------------------------------------
+ */
+@keyframes slide-in-bottom {
+  0% {
+    transform: translateY(1000px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}