update

ts_web/elements/sio-fab.ts

@@ -67,15 +67,27 @@ export class SioFab extends DeesElement {
           border-radius: ${radius.full};
           user-select: none;
           border: 1px solid ${bdTheme('border')};
+          animation: fabEntrance 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+        
+        @keyframes fabEntrance {
+          from {
+            transform: scale(0) rotate(-180deg);
+            opacity: 0;
+          }
+          to {
+            transform: scale(1) rotate(0deg);
+            opacity: 1;
+          }
         }
 
         #mainbox:hover {
           box-shadow: ${cssManager.bdTheme(shadows.lg, shadows.xl)};
-          transform: translateY(-2px);
+          transform: translateY(-2px) scale(1.05);
         }
 
         #mainbox:active {
-          transform: translateY(0);
+          transform: translateY(0) scale(0.98);
           box-shadow: ${cssManager.bdTheme(shadows.sm, shadows.md)};
         }
 
@@ -84,8 +96,8 @@ export class SioFab extends DeesElement {
           top: 0px;
           left: 0px;
           will-change: transform;
-          transform: ${this.showCombox ? 'rotate(0deg)' : 'rotate(-360deg)'};
-          transition: ${transitions.transform};
+          transform: ${this.showCombox ? 'rotate(180deg)' : 'rotate(0deg)'};
+          transition: transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
           height: 100%;
           width: 100%;
           object-fit: contain;
@@ -150,11 +162,11 @@ export class SioFab extends DeesElement {
 
         #comboxContainer sio-combox {
           position: absolute;
-          bottom: calc(56px + ${spacing[4]});
+          bottom: calc(56px + ${spacing["4"]});
           right: 0;
           transition: ${transitions.all};
           will-change: transform;
-          transform: translateY(${spacing[5]});
+          transform: translateY(${spacing["5"]});
           opacity: 0;
           pointer-events: none;
         }